Vue中动态设置img的src值

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/eieiei438/article/details/82986815

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>

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

•