vue踩坑记录之src的动态绑定赋值问题

vue src的动态绑定赋值问题

我的需求是这样的，在一个页面点击了路由器的链路，将某个对象传递给下一个页面，这个对象的其中就包含了一个{递减：''，IMG：''}这样的对象数组，我想在跳转的页面将这个IMG显示出来，于是我这样做：

在跳转的下一个页面接收这个数组DUI

在HTML中进行展示

赋值的语句并没有什么错误，

但是出现了下面的结果：

其中文字内容能够正常显示，说明传递的数据没有错

但是由于在div中显示之前，webpack并没有去编译我的desc.img

因此我找到原因如下：

原先考虑的是直接将URL传递过去就行，但是这导致这个图片根本不能被编译被识别，所以修改如下：

结果如下：图片正常显示

vue动态绑定设置图片src路径

template 中的内容：

<!-- <img :src="imgURL" style="width: 100px;height: 100px; "/> -->
 <img src="https://www.cugb.edu.cn/website/images/cugb_badge.png" alt="">

在data 中我们需要什么出来

data() {
            return {
                imgURL : require(`@/assets/mapPoint/blue.png`);
                //imgURL : require(`@/assets/mapPoint/red.png`);
                //imgURL : require(`@/assets/mapPoint/yellow.png`);
            };
        },

如果我们是从后台读取的，需要在methos 请求方法中进行 找出来 当前要显示的路径地址。

然后绑定出来 在方法中赋值

this.imgURL = "www.baidu.com/1.jpg"

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。