vue-cli脚手架下,图片路径使用变量?

1.问题

使用vue-cli的webpack模版做脚手架。页面中某区域的内容被作为组件,在 instruction.vue中进行编写,它包括3个格式相同、内容不同的区块,我希望用把里面各自不同的文字、图片路径放到js代码中,剩余部分借助v-for来处理,节省代码,同时逻辑更清晰。

目前效果为:

clipboard.png

我的问题是:我的文字都正常,我的图都挂了:我把图像路径写在.vue文件的<script></script>中了,如果写死在<template></template>区域,则正常显示:

clipboard.png
但是硬编码的效果不是我要的,我希望显示不同的图片。

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.报错信息&&截图

clipboard.png
以及,当前.vue文件和相应的文件目录:

clipboard.png

各种配置都是用vue init webpack my-project默认来的。

4.备注

希望提供具体的做法,比如改webpack的配置文件,或者改文件路径,或者改图片路径变量的赋值,谢谢。

阅读 12.2k
3 个回答

src=~assets/xxxx.png

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏