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中v-if与v-show的使用区别及应用场景解读
本文详细介绍了Vue开发中v-if和v-show的使用方法和性能区别,帮助开发者根据场景选择合适的条件渲染指令,v-if通过添加/移除DOM元素实现条件渲染,适用于不常切换的场景；v-show通过CSS控制显示/隐藏,适用于频繁切换的场景
2026-01-01
Vue2.0实现简单分页及跳转效果
这篇文章主要为大家详细介绍了Vue2.0实现简单数据分页，及页数的跳转效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-07-07
vue3使用ref和reactive的示例详解
Vue 3引入了两个新的API,ref和reactive,用于创建响应式对象,这两个方法都位于Vue.prototype上,因此可以在组件实例中直接使用,本文给大家介绍vue3使用ref和reactive的示例,感兴趣的朋友跟随小编一起看看吧
2023-10-10
vue项目根据不同环境进行设置打包命令的方法
这篇文章主要介绍了vue项目根据不同环境进行设置打包命令,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-11-11
watch(监视属性)和computed(计算属性)的区别及实现案例
watch和computed是vue实例对象中的两个重要属性，watch是监视属性，用来监视vue实例对象上属性和方法的变化，computed被称为计算属性，可以将data对象中的属性进行计算得到新的属性，这篇文章主要介绍了watch(监视属性)和computed(计算属性)的区别,需要的朋友可以参考下
2023-05-05
基于vue2.0实现简单轮播图
这篇文章主要为大家详细介绍了基于vue2.0实现简单轮播图，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-11-11
vue实现公共方法抽离
这篇文章主要介绍了vue实现公共方法抽离，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
浅谈Vue父子组件和非父子组件传值问题
本篇文章主要介绍了浅谈Vue父子组件和非父子组件传值问题，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
2017-08-08
vue之数据代理详解
这篇文章主要为大家介绍了vue之数据代理，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2021-12-12
探索 Vue.js 组件的最新特性(最新整理)
本文将深入探讨 Vue.js 组件的一些最新特性,包括组合式 API、Teleport、Suspense 等,帮助开发者更好地掌握和运用这些特性,从而构建出更加高效、复杂的前端应用,感兴趣的朋友一起看看吧
2025-07-07