vue-cli4.4.4中图片的动态绑定

vue中图片的引入方式

给图片地址绑定变量

<template>
    <img :src="imgUrl">
</template>

1.直接将图片引入为模块

<script>
	 require imgUrl from "../assets/test.png"
</script>

2.将imgUrl放在数据里

data(){
	return {
		imgUrl:require("../assets/test.png")
		}
    }

vue中图片的绑定方式

当我们直接填充地址模板时

<ul>
	<li v-for="(item,index) in list" :key="index">
		<img :src="item.path" alt="">
	</li>
</ul>
...
export default {
	data() {
            return {
                list: [{
                    id: 0,
                    path: '../../assets/online-1.webp',
                }]
            }
}

虽然并未发生报错，但是图片无法显示出来，因为我们使用的是相对目录，在项目打包后，assets里的静态资源目录会发生改变，此时我们渲染到页面中的src地址是失效的

1.动态绑定

在data返回的对象中添加publicPath属性
引入public中的图片

data() {
	return {
		publicPath: process.env.BASE_URL
	}

利用es6语法，``符号里利用$符号和大括号将参数传入，这里${publicPath}可以理解为 public/目录，他是有带反斜杠的，所以记得后面不要接反斜杠，然后再将for循环出来的图片名参数传入

<img :src="`${publicPath}img/${item.path}`" alt="">
...
data() {
	return {
		list[{
			id:0,
			path:'online-1.webp'
			}]
		}

2.import引入

如果需要引入assets目录下的图片

import img01 from '@/assets/img/online-1.webp'

img01 为自定义的名字，此时图片就会被正确引入，然后我们还要调用

<ul>
	<li v-for="(item,index) in list" :key="index">
		<img :src="item.path" alt="">
	</li>
</ul>
...
<script>
	import img01 from '@/assets/img/online-1.webp'
	export default {
		data() {
            return {
            	list: [{
                	id: 0,
                	path: img01
                	}]
                }
          	}
</script>

以上就是两个关于绑定本地图片的方法。