vue踩坑记录之src的动态绑定赋值问题
更新时间：2023年06月06日 08:51:23 作者：Milan_KunderLa
这篇文章主要介绍了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"
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue如何通过某个字段获取详细信息，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
这篇文章主要介绍了vue 动态组件(component :is) 和 dom元素限制(is)用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要给大家介绍了关于vue3中封装axios请求的最新实现步骤,在Vue 3中可以通过封装axios来实现接口的统一管理和调用,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-04-04
在vue项目中假使我们在同一个路由下,只是改变路由后面的参数值,期望达到数据的更新,这篇文章主要给大家介绍了关于vue3监听路由的变化的相关资料,需要的朋友可以参考下2023-09-09
Hexo已经看腻了，来手把手教你使用VuePress搭建个人博客
vuepress是尤大大4月12日发布的一个全新的基于vue的静态网站生成器，实际上就是一个vue的spa应用，内置webpack，可以用来写文档。这篇文章给大家介绍了VuePress搭建个人博客的过程，感兴趣的朋友一起看看吧2018-04-04
这篇文章主要为大家详细介绍了vue的生命周期，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
这篇文章主要介绍了基于vue和websocket的多人在线聊天室,需要的朋友可以参考下2020-02-02
用户可以多文件上传 ,在上传到服务器之前需要检查服务器中有无重名的文件,如果有会返回重名文件的名称数组,这些文件需要一个一个的向用户确认是否要覆盖重传,这篇文章主要介绍了elementui上传文件不允许重名,需要的朋友可以参考下2024-02-02
这篇文章主要给大家介绍了关于vue项目结构目录超详细介绍的相关资料,Vue项目目录结构是指在开发Vue项目时,为了更好地组织和管理代码,将不同的文件按照一定的规则和层次结构进行分类和存放的方式,需要的朋友可以参考下2023-12-12
最近遇到一个需求,在 Vue3 的一个 H5 页面当中点击拖拽图标上下拖动 tab 子项,然后点击保存可以保存最新的 tab 项顺序,同事说可以用 vue-draggable-plus 这个库来实现拖拽,所以本文给大家介绍了如何使用vue-draggable-plus实现拖拽排序,需要的朋友可以参考下2024-01-01
最新评论