vue中使用:src="img"绑定本地静态资源失效问题

vue中使用:src="img"绑定本地静态资源失效问题

直接使用src本地引入图片正常显示

 

<img src="../assets/img/bs.png" alt="" />

而使用v-bind时却意外的失效

<img :src="img" alt="" />
//js
data() {
    return {
      img:require("../assets/img.png")
    };
  },

 

看下浏览器生成代码

//src
<img src="http://localhost:8071/img.png" alt>
//:src
<img src="../assets/img.png" alt>

 

解决方法
为了使Webpack可以正确返回资源路径, 你需要使用
:src 下放 base64格式 或者 放 require(本地图片路径）；

data() {
    return {
      img:require("../assets/img/bs.png")
    };
  },



转：https://blog.csdn.net/dss0225/article/details/107410348