最近在学习Vue-cil构建项目时发现了不能通过动态绑定绝对路径的方法使用静态图片。于是通过学习了一些方法来使用。希望能帮到大家。

首先先给大家了解一下问题所在。

<template>
	<img src="../images/Lee01.jpg" />
</template>
//正常的绑定图片，能正常显示

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

<script>
	export default{
		name:'images',
		data(){
			return{
				imgList:[
					"../images/Lee01.jpg"
				]
			}
		}
	}
</script>
//通过数组来动态绑定图片，它裂开来了

这是为什么？

因为正常的绑定静态资源vue-cil会把图片进行一个打包。让它有一个新的路径。

普通的绑定：

 可以看到后面多了一段类似哈希值的数值。

而动态的绑定：

 没有进行重新打包，而是绝对路径的字符串，这时候是不能进行访问的。

第一种解决方法是通过require（）进行图片的引入。

        

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

<script>
	export default{
		name:'images',
		data(){
			return{
				imgList:[
					require('../images/Lee01.jpg')
				]
			}
		}
	}
</script>

显示效果：

 它好了！但这种方法不是我想要的效果，总不能每个组件都require一遍吧？而且绝对路径也不好操作是吧。

接下来是我琢磨的第二种方法

通过上传图片到图床，图片通过http链接进行引入。

推荐路过图床，免费高速。国内也能访问。至于如何使用图床，大家只要去搜一下就会用，这里不啰嗦了。

这是我已经上传到图床的一个图片链接

 接下来改改代码

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

<script>
	export default{
		name:'images',
		data(){
			return{
				imgList:[
					'https://z3.ax1x.com/2021/09/25/4ssMGT.jpg'
				]
			}
		}
	}
</script>

确认一下效果

 oooooooooooooooooookkkkkkkkkkkkkkkkkkkkkkkkkkk!

估计有人要问这不是和require差不多吗。其实不是的，通过http这样的话可以把这个imglist数组抽离出来成为一个独立的文件，需要的时候在组件import引入，而且不用担心绝对路径的错误。

大家有更好的方法务必跟我交流一下，有问题或者文章有错误欢迎提出！纯手打累死人了，给个点赞mua