vue v-for循環解決img標簽的src動態綁定問題

一、概述

示例代碼：

<template>
  <div>
    <div v-for="(item,index) in product">
      <img src="{{ item.imgSrc }}" alt="">
    </div>
  </div>
</template>

發現這樣運行會報錯

 

二、解決方法

img標簽動態綁定src

<template>
  <div>
    <div v-for="(item,index) in product">
      <img :src="item.imgSrc" alt="">
    </div>
  </div>
</template>

完整代碼如下：

<template>
  <div>
    <div v-for="(item,index) in product">
      <img :src="item.imgSrc" alt="">
    </div>
  </div>
</template>

<script>
    export default {
      name: "test",
      data() {
        return {
          product:[
            {
              id:"1",
              imgSrc:"http://www.py3study.com/Public/images/article/thumb/random/158.jpg",
            },
            {
              id:"2",
              imgSrc:"http://www.py3study.com/Public/images/article/thumb/random/159.jpg",
            },
            {
              id:"3",
              imgSrc:"http://www.py3study.com/Public/images/article/thumb/random/160.jpg",
            },
          ],
        };
      },
    }
</script>

<style scoped>

</style>

 

總結：主要是圖片位置的問題，圖片存放在什么位置，能夠讓img通過src動態的綁定對應的值

其次是圖片配置路徑的問題，若圖片就和響應的vue在同一個文件，直接通過 ./logo.png 是只能寫死的情況下顯示，而動態的：src綁定是無法完成這種情況的顯示。

 

本文參考鏈接：

https://blog.csdn.net/qq_41860497/article/details/100059721