设置动态图片

一、动态图片格式

 <img class="img_size" :src="logo_data.url" />


  const imgpath=response.data.logo_data.url
  this.logo_data.url=require('../assets/'+imgpath);

二、出现问题

 通过百度知道要将url("../assets/pageBg.png")改成url("@/assets/pageBg.png")，但是又报了

 再次百度发现 要将url("@/assets/pageBg.png")改成url("~@/assets/pageBg.png")

问题原因：

     vue2.5及以下版本以上两种写法都没有问题, 2.6就出现这个问题,应该和webpack配置相关，
vue2.6用的是webapack4.0。

两种写法的区别：

1.相对路径: "./assets/logo_blue.png" 
2.没有前缀的路径 "assets/logo_blue.png" 被webpack解析为 相对路径
3.带~的路径  "~@/assets/theme/logo_blue.png" 被webpack解析为 require(src/assets/theme/logo_blue.png) 动态引入 
@在webpack 被resolve.alias配置下等价于/src
4.相对根目录的路径 "/assets/logo_blue.png" webpack不解析

三、变量和字符串

 <div class="box1" v-for="(item, i) in data" :key="i">
          <div class="top">
            <div class="icon">
              <img :src="imgVeiw(i + 1)" alt="" />
            </div>
           
          </div> 
 </div>


  imgVeiw(value) {
        if (value) {
          // var a = '@/assets/img/01' + value + '.png'
          // console.log("图片内容",a)
          return require("@/assets/img/01" + value + ".png");
          
        }
        return
      },