1.问题
使用vue-cli的webpack模版做脚手架。页面中某区域的内容被作为组件,在 instruction.vue
中进行编写,它包括3个格式相同、内容不同的区块,我希望用把里面各自不同的文字、图片路径放到js代码中,剩余部分借助v-for
来处理,节省代码,同时逻辑更清晰。
目前效果为:
我的问题是:我的文字都正常,我的图都挂了:我把图像路径写在.vue
文件的<script></script>
中了,如果写死在<template></template>
区域,则正常显示:
但是硬编码的效果不是我要的,我希望显示不同的图片。
2.代码
这里是我的.vue
文件代码,里面用到了少许bootstrap(外部有相应饮用这里不用担心):
<template>
<div class="row">
<div class="col-md-4" v-for="item in instrus">
<h2><img :src="'../assets/'+item.imgsrc"> {{item.title}}</h2>
<p>{{item.text}}</p>
</div>
</div>
</template>
<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>
<style>
</style>
3.报错信息&&截图
以及,当前.vue
文件和相应的文件目录:
各种配置都是用vue init webpack my-project
默认来的。
4.备注
希望提供具体的做法,比如改webpack的配置文件,或者改文件路径,或者改图片路径变量的赋值,谢谢。
url-loader无法解析js动态生成的路径。
参考这个:
http://segmentfault.com/q/101...