Vue_引入图片

[1]直接使用相对路径

• <img src='../img/img.jpg' />
  

• 在本地图片可以正常显示；打包之后图片也可以正常显示

[2]将路径放在data中再引入

• data(){
      return{
          url:'../img/img.jpg'
      }
  }
  

• <img :src='url' />
  

• 在本地图片可以正常显示，但是打包后图片显示不出来！

问题

打包后图片不能正常显示！

原因

动态加载，在路径被解析器解析的时候解析为一个字符串，导致图片无法正常显示

解决

• 若是想使用动态地址

  • [1]使用require包裹

    • data(){
          return{
              url:require('../img/img.jpg')
          }
      }
      

    • <img :src='url' />
      

  • [2]上传到cos，使用链接

    • data(){
          return{
              url:'http://111.jpg'
          }
      }
      

    • <img :src='url' />