前言
最近学习了vue-cli脚手架搭建项目,在静态资源图片渲染的时候出现了渲染失败的问题,通过搜索资料和咨询大佬,总结了以下原因:
1.vue-cli脚手架涉及到webpack的打包机制,最终页面并不会显示图片内容,原因在于图片路径并没有取打包后的资源路径。
2.在select选择中,require方法所返回的是字符串,而不是函数的执行结果。
接下来,请看详细例子。
一、简单的vue-cli静态资源图片渲染失败
二、动态的vue-cli静态资源图片渲染失败
以select选择框为例子(选择不同的图片就渲染不同的图片)
原因:require方法返回的是字符串,而不是函数执行的结果。
解决方法一:
在value前面加冒号
选择头像:<select v-model="person.imgsrc"><option:value=" require('../../assets/1.jpg')">1</option><option:value=" require('../../assets/2.jpg')">2</option><option:value=" require('../../assets/3.jpg')">3</option><option:value=" require('../../assets/4.jpg')">4</option></select><br>
span><imgclass="img-style":src="person.imgsrc"></span>
解决方法二:
选择头像:<select v-model="person.imgsrc"><option v-for="option in options":key="option.key":value="option.imgsrc">{{option.key}}</option></select><br><span><imgclass="img-style" v-bind:src="person.imgsrc"></span>
data(){return{
person:{
num:'',
name:'',
sex:'',
age:'',
hobby:''},
options:[{
key:'1',
imgsrc:require('../../assets/1.jpg')},{
key:'2',
imgsrc:require('../../assets/2.jpg')},{
key:'3',
imgsrc:require('../../assets/3.jpg')},{
key:'4',
imgsrc:require('../../assets/4.jpg')}]}},
如果能帮的到你,欢迎大家关注,点赞,评论,收藏,转发~
如有不足也请在评论区提出批评指正!多多指教!