Vue中动态设置img的src值

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

Vue中动态设置img的src值

问题

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

src数据格式

  1. "companyImages":[
  2.     "http://localhost:8080/cszj/image/image?image=2757dcrz7e0v5stxwqsvd4dk4ezdvvqo",
  3.     "http://localhost:8080/cszj/image/image?image=3757dcrz7e0v5stxwqsvd4dk4ezdvvqo"
  4. ]

错误的做法

  1. <li v-for="(item,idx) in company_images">
  2.     <img id="company_image" src="{
  3.    {item}}"/>
  4.     <el-button>删除</el-button>
  5. </li>
  9. <li v-for="(item,idx) in company_images">
  10.     <img id="company_image" src="{
  11.    {item.toString()}}"/>
  12.     <el-button>删除</el-button>
  13. </li>
  17. <li v-for="(item,idx) in company_images">
  18.     <img id="company_image" :src="{
  19.    {item.toString()}}"/>
  20.     <el-button>删除</el-button>
  21. </li>
  25. <li v-for="(item,idx) in company_images">
  26.     <img id="company_image" src="{
  27.    {company_images[idx]}"/>
  28.     <el-button>删除</el-button>
  29. </li>
  33. <li v-for="(item,idx) in company_images">
  34.     <img id="company_image" :src="{
  35.    {company_images[idx]}"/>
  36.     <el-button>删除</el-button>
  37. </li>
  41. 等等用了{
  42.    {}}表达式的

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

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

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

  • wTtmkYs.png

发表评论

表情：
评论列表 （有 0 条评论，317人围观）

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

相关阅读

    相关 img 中的src的应用

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

    快来打我*快来打我*/ 0 赞/ 210 阅读