vue动态引入图片

前言

这篇文章主要介绍了关于vue图片路径的处理问题，在我们想要动态加载图片路径时，由于vue的打包原理不同，我们也有不同的处理图片路径方法，希望对大家有所帮助。如有错误或未考虑完全的地方，望各位斧正。

---

1、Vue2中动态图片路径处理

原因

在webpack中会将图片来当做模块来用，因为是动态加载的，所以url-loader将无法解析图片地址，将图片作为模块加载进去。

解决方案

使用 require()解决

1、直接在标签中使用

<img :src="require(`../../../assets/image/${item.imgUrl}`)" />

2、在data中使用

<template>
          <div>
            <!-- 遍历图片 -->
            <img  v-for="(item, index) in ImgList" :key="index" :src="item.imgUrl" />
          </div>
</template>

<script>
	export default {
		data() {
			return {
				ImgList:[
					{imgUrl:require("../../../assets/image/1.png")},
					{imgUrl:require("../../../assets/image/2.png")},
					{imgUrl:require("../../../assets/image/3.png")}
				]
			}
	}
</script>

3、style中动态背景图片路径处理

注意：背景图片一定要有宽高才可以显示

<template>
		<ul>
        	<li class="bgImg" v-for="(item, index) in ImgList" :style="getBGImg(item.imgUrl)"></li>
        </ul>
</template>

<script>
	export default {
		data(){
			return {
				ImgList:[
					{imgUrl:require("../../../assets/image/1.png")},
					{imgUrl:require("../../../assets/image/2.png")},
					{imgUrl:require("../../../assets/image/3.png")}
				]
			}
		},
		methods: {
    		// 获取动态背景
    		getBGImg(item) {
     			return {
        			backgroundImage: `url('${item}')`
      			};
    		}
  },
	}
</script>
<style scoped>
.bgImg {
    background-position: center center;
    width: 100%;
    height: 100px;
}
</style>

---

2、Vue3 + TypeScript 中动态图片路径处理

由于打包工具的不同，我在这里把vue3拆分成 vite 和 webpack版本

---

vuecli和webpack无法引入的原因

在webpack中其实是可以使用require的，但是ts无法识别require原因很简单，ts告诉我们:

找不到名称 “require”。是否需要为节点安装类型定义? 请尝试使用 npm i --save-dev @types/node。

解决步骤

1、根据提示npm

npm i --save-dev @types/node

2、 修改ts配置项

在tsconfig.json文件中加上type:['node'] 指定类型

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "skipLibCheck": true
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }],
  "type":["node"]
}

3、使用

<img :src="require(`../../../assets/image/${item.imgUrl}`)" />

---

vite原因

1、vite只是一个基于es modules的服务，有点类似于webpack的webpack-dev-server。
2、生产环境打包是基于rollup的

CommonJS 和 es modules 的区别我们这里不多做描述，我们知道 es modules 是不支持require的，所以在vite中我们该怎么动态引入图片路径呢？

解决方案

我们可以在vite官网找到解决方案：Vite中静态资源处理

img动态绑定方法

<template>
	<div>
		<img  v-for="(item,index) in imgList" :key="index" :src="imgUrl(item.imgUrl)">
	</div>
</template>

<script setup lang='ts'>
	const imgList = ref([
	  { imgUrl: "./../../../assets/1.jpg" },
	  { imgUrl: "./../../../assets/1.jpg" },
	  { imgUrl: "./../../../assets/1.jpg" }
	])

	// 默认图片
	const imgUrl = (url: string) => {
	  return new URL(url, import.meta.url).href
	}
</script>

style动态绑定方法

注意：背景图片一定要有宽高才可以显示

<template>
	<ul >
	    <li class="bgImg" v-for="(item, index) in ImgList" :key="index" :style="getBGImg(item.imgUrl)"></li>
	</ul>
</template>

<script setup lang='ts'>
import { ref } from 'vue'
	const ImgList = ref(
	  [
	    { imgUrl: "../../../../assets/images/bg1.png" },
	    { imgUrl: "../../../../assets/images/bg1.png" },
	    { imgUrl: "../../../../assets/images/bg1.png" }
	  ]
	)

	const getBGImg = (url: string) => {
	  return {backgroundImage: `url('${new URL(url, import.meta.url).href}')`}
	}

</script>

<style scoped>
.bgImg {
    background-position: center center;
    width: 100%;
    height: 100px;
}
</style>

---