标签：require 绑定 cil 图床 images 动态 图片

最近在学习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

标签：require,绑定,cil,图床,images,动态,图片
来源： https://blog.csdn.net/weixin_47469299/article/details/120813543

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。