Vue中动态设置img的src值实现方式

更新时间：2025年09月19日 09:05:54 作者：乘风御浪云帆之上

在Vue中动态绑定img的src属性时,需使用v-bind或:语法,确保数据为有效字符串或URL格式,避免编译错误,开发环境通过颜色区分错误类型,有助于快速定位问题

Vue中动态设置img的src值

问题

循环li组件时，动态设置img
设置img时，src属性报错

src数据格式

"companyImages":[
    "http://localhost:8080/cszj/image/image?image=2757dcrz7e0v5stxwqsvd4dk4ezdvvqo",
    "http://localhost:8080/cszj/image/image?image=3757dcrz7e0v5stxwqsvd4dk4ezdvvqo"
]

错误的做法

<li v-for="(item,idx) in company_images">
    <img id="company_image" src="{{item}}"/>
    <el-button>删除</el-button>
</li>

<li v-for="(item,idx) in company_images">
    <img id="company_image" src="{{item.toString()}}"/>
    <el-button>删除</el-button>
</li>

<li v-for="(item,idx) in company_images">
    <img id="company_image" :src="{{item.toString()}}"/>
    <el-button>删除</el-button>
</li>

<li v-for="(item,idx) in company_images">
    <img id="company_image" src="{{company_images[idx]}"/>
    <el-button>删除</el-button>
</li>

<li v-for="(item,idx) in company_images">
    <img id="company_image" :src="{{company_images[idx]}"/>
    <el-button>删除</el-button>
</li>

等等用了{{}}表达式的

正确的做法【:相当于bind:】

<li v-for="(item,idx) in company_images">
    <img id="company_image" :src="item"/>
    <el-button>删除</el-button>
</li>

其实在编译环境下通过颜色是有区别的

总结

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

您可能感兴趣的文章:

使用Vue封装一个自定义的右键菜单组件
通过自定义右键菜单栏,用户可以根据自己的需求添加、调整和删除菜单选项,所以本文就来为大家介绍一下如何使用使用Vue封装一个自定义的右键菜单组件吧
2024-01-01
Vue常用实例方法示例梳理分析
在了解vue的常用的实例方法之前，我们应该先要了解其常用的实例属性，你能了解到的vue实例属性有哪些呢？小编在这里就列举了几个常用的vue实例的属性。大家可以一起参考学习一下
2022-08-08
Vue+webpack项目配置便于维护的目录结构教程详解
新建项目的时候创建合理的目录结构便于后期的维护是很重要。这篇文章主要介绍了Vue+webpack项目配置便于维护的目录结构 ,需要的朋友可以参考下
2018-10-10
Vue+Java+Base64实现条码解析的示例
这篇文章主要介绍了Vue+Java+Base64实现条码解析的示例，帮助大家实现条码解析，感兴趣的朋友可以了解下
2020-09-09
vue3移动端嵌入pdf的多种方法小结
这篇文章主要介绍了vue3移动端嵌入pdf的多种方法小结,使用embed嵌入有好处也有缺点,本文给大家讲解的非常详细,需要的朋友可以参考下
2023-10-10
vue用FileSaverJs导出文件
FileSaver.js 是在客户端保存文件的解决方案，非常适合在客户端上生成文件的 Web 应用，它是 HTML5 版本的 saveAs() FileSaver 实现，这篇文章主要介绍了vue用FileSaverJs导出文件,需要的朋友可以参考下
2023-09-09
Vuex中mutations和actions的区别及说明
这篇文章主要介绍了Vuex中mutations和actions的区别及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-12-12
基于Vue+WebSocket实现实时数据可视化的实战指南
在现代交通大屏项目中,实时数据的采集和可视化尤为重要,本文结合 Vue3 和 ECharts,分享一个支持多 WebSocket 数据源实时合并、模拟数据调试、自动重连的完整设计方案,帮助你快速搭建健壮的数据可视化组件,需要的朋友可以参考下
2025-07-07
Vue 3集成海康Web插件实现视频监控功能
本文详细介绍了如何使用 Vue 3 框架集成海康Web插件实现视频监控功能,通过定义属性、事件、变量,以及编写初始化、播放视频、处理节点点击事件等方法,我们成功实现了视频监控系统的前端部分,感兴趣的朋友一起看看吧
2024-11-11
elementplus 中 DatePicker 日期选择器样式修改无效的问题及解决方案
这篇文章主要介绍了elementplus中DatePicker日期选择器样式修改无效的问题,DatePicker日期选择器弹出面板默认挂载在body上,所以在组件中添加了 scoped 属性的 style 标签下是修改不到其样式的,讲解了datepicker的使用方法,及常见的配置项和对应的值,需要的朋友可以参考下
2024-01-01