1.问题
使用vue-cli的webpack模版做脚手架。页面中某区域的内容被作为组件,在 instruction.vue中进行编写,它包括3个格式相同、内容不同的区块,我希望用把里面各自不同的文字、图片路径放到js代码中,剩余部分借助v-for来处理,节省代码,同时逻辑更清晰。
但是:图片显示不出来
2.代码
这里是我的.vue文件代码:
<script>
export default {
data(){
return{
instrus:[
{
title:'标题1',
imgsrc: 'pic1.png',
text:'这是第一段文字',
},
{
title:'标题1',
imgsrc: 'pic2.png',
text:'这是第一段文字',
},
{
title:'标题1',
imgsrc: 'pic3.png',
text:'这是第一段文字',
},
]
}
}
}
</script>
报错信息&&截图
一直报404的错误,应该是webpack没有找到图片。如果代码改为以下这种格式就没有问题
instrus:[
{
title:'标题1',
imgsrc: require('pic1.png'),
text:'这是第一段文字',
},
参考:https://segmentfault.com/q/1010000006768193
https://segmentfault.com/q/1010000006743502