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


    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

  • 相关阅读:
    新公司面试记
    棋手与棋子
    有线通or ADSL?
    好久没去上海动物园了
    15=60
    技术和销售
    安能辨龟是雄雌巴西龟的雌雄辨别方法
    推荐两首好歌
    母亲节祝福天下所有的母亲
    农夫山泉的源头千岛湖游记
  • 原文地址:https://www.cnblogs.com/doubolexiang/p/7171054.html
Copyright © 2020-2023  润新知