Vue中动态设置img的src值

青旅半醒 2022-05-07 21:10 243阅读 0赞

# 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>

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

*  ![wTtmkYs.png][]

[wTtmkYs.png]: https://i.imgur.com/wTtmkYs.png

发表评论取消回复

表情：

评论列表（有 0 条评论，243人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue中图片src动态拼接

有时我们需要动态拼接图片的路径，可以使用下面的方式 <img :src="getImgUrl(item)" v-for="(item, index) in array

桃扇骨/ 2022年11月14日 10:26/ 0 赞/ 393 阅读

相关 Vue项目中img标签src的路径问题

[Vue项目中img标签src的路径问题 - 简书一、问题引入今天重构之前赶工的项目，父组件通过属性绑定传值给子组件，子组件的图片url在img标签的src属性中相对路径写死

- 日理万妓/ 2022年09月15日 05:37/ 0 赞/ 399 阅读

相关 img 中的src的应用

在页面加载的时候，img标签的src 会跟填写的内容去加载，servlet 或者controller 或者你自己认为希望加载的java代码。我们这边举一个加载servlet

快来打我*/ 2022年08月24日 05:20/ 0 赞/ 158 阅读

相关给img标签动态设置src属性，不生效

给img标签动态设置src属性，不生效 js如下： for(var i = 0; i<len;i++){ var data = datas[i];

亦凉/ 2022年06月06日 03:41/ 0 赞/ 1197 阅读

相关 Vue中img的src属性绑定

<img src="./img/red.png'" /> // 页面显示图片如果遇到图片是动态的，也就是说在不同情况下显示不同的图片，也就是下面使用的属性绑定

﹏ヽ暗。殇╰゛Y/ 2022年05月18日 06:15/ 0 赞/ 221 阅读

相关 Java读取html中所有img标签的src值

原文地址：[https://blog.csdn.net/zgs\_shmily/article/details/49799997][https_blog.csdn.net_zg

忘是亡心i/ 2022年05月13日 23:38/ 0 赞/ 580 阅读

相关 Vue中动态设置img的src值

Vue中动态设置img的src值问题循环li组件时，动态设置img 设置img时，src属性报错 src数据格式 "compa

青旅半醒/ 2022年05月07日 21:10/ 0 赞/ 244 阅读

相关 vue 动态设置img的值

需求：依据当前路由点击按钮图片实现img 如果直接在:src中写路径会获取不到 <img :src="'/god'==$route.path?'./images/i

╰+哭是因爲堅強的太久メ/ 2022年04月15日 03:39/ 0 赞/ 252 阅读

相关 Vue img中src地址无法访问时处理

直接利用img原生属性onerror来设置默认图片 <img class="room\_img" οnerrοr="javascript:this.src='@/assets

客官°小女子只卖身不卖艺/ 2022年04月01日 04:16/ 0 赞/ 562 阅读

相关 vue 动态绑定img的src属性,图片失效

静态绑定都不失效动态绑定src时： 1、放置在static文件夹内的图片,可直接动态绑定不失效 2、放置在其他文件夹的图片,动态绑定

╰半橙微兮°/ 2021年07月25日 00:41/ 0 赞/ 785 阅读