Vue图片路径绑定的问题 - Kaiqisan

简答

src: '../../assets/images/cat1.jpg' // 不行

src: require('../../assets/images/cat1.jpg') // 行

详解

当我们使用vue的v-for方法导入本地图片的时候，发现出了问题，一张图片也没办法导入

<template>
	<div class="main">
		<img v-for="(item, i) in imgList" :src="item.src" :alt="item.name" :key="i" />
	</div>
</template>

<script>
    export default {
        name: 'index',
        data() {
            return {
                imgList: [
					{
					    name: 'cat1',
						src: '../../assets/images/cat1.jpg'
					},
					{
					    name: 'cat2',
						src: '../../assets/images/cat2.jpg'
					},
					{
					    name: 'cat3',
						src: '../../assets/images/cat3.gif'
					}
				]
            }
        },
    }
</script>

如图所示，导入的图片全部碎了。

这是因为vue-cli是一个项目，它是需要被打包的，而我们如上使用自己的路径导入本地图片之后这个路径是固定的，因为会被解析成字符串（大家可以打开f12开发者模式确定），而打包之后这个图片路径是会改变的，这个路径由webpack.config.js（vue-cli2） vue.config.js(vue-cli3 vue-cli4)配置决定,但此时，这个路径是不变的，这就导致了图片无法找到

如果要在不改变代码的情况下解决这个问题的话只能让图片文化的相对路径在打包之后也能保持一致。但这样定死的规则非常扯，比较项目这个东西变数非常大，一切都需要灵活万变，不可写死。

于是有了以下的解决方案

<template>
	<div class="main">
		<img v-for="(item, i) in imgList" :src="item.src" :alt="item.name" :key="i" />
	</div>
</template>

<script>
    export default {
        name: 'index',
        data() {
            return {
                imgList: [
					{
					    name: 'cat1',
						src: require('../../assets/images/cat1.jpg')
					},
					{
					    name: 'cat2',
						src: require('../../assets/images/cat2.jpg')
					},
					{
					    name: 'cat3',
						src: require('../../assets/images/cat3.gif')
					}
				]
            }
        },
    }
</script>

使用require导入，这样在打包的时候告诉打包工具，我要使用这个图片，先把图片引入，再绑定，找到图片之后统一打包，并添加路径，为打包之后的图片路径，这样，显示静态图片就没有任何问题了。

总结

上面的内容需要对打包机制稍有了解，建议学习webpack了解更多，这个内容以后我也会出的。