v-for循環(huán)中如何使用require/import關(guān)鍵字引入本地圖片

小編給大家分享一下v-for循環(huán)中如何使用require/import關(guān)鍵字引入本地圖片，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

問(wèn)題描述

我們做項(xiàng)目中，常常需要把圖片呈現(xiàn)到頁(yè)面上，一般來(lái)說(shuō)有以下幾種方式

方式一（后端返回圖片URL）

這種方式就是后端返回圖片的url地址，我們直接img標(biāo)簽的src屬性綁定imgUrl即可。如下代碼：

<div class="item" v-for="(item, index) in apiArr" :key="index">
    <!-- apiArr是后端返回的數(shù)據(jù)，其中的每一項(xiàng)中都有一個(gè)imgUrl屬性，存儲(chǔ)的是圖片的url地址 -->
    <img :src="item.imgUrl" alt="">
</div>

方式二（前端使用require）

第二種方式，把圖片文件存儲(chǔ)到前端里，后端只返回圖片的名字（或不返回圖片數(shù)據(jù)），代碼舉例如下：

代碼附上

<template>
  <div class="wrap">
    <div class="item" v-for="(item, index) in apiArr" :key="index">
      <div class="imgWrap">
        <!-- require引入圖片文件模塊 -->
        <img :src="require(`@/assets/img/${item.imgTitle}.png`)" alt="" />
        <!-- 最后就變成這樣的了就能正常顯示了 <img src="@/assets/img/first.png" alt=""> -->
      </div>
      <div class="infoWrap">
        <div><span class="bloder">名次：</span> {{ item.title }}</div>
        <div><span class="bloder">得分：</span> {{ item.score }}</div>
      </div>
    </div>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      apiArr: [],
    };
  },
  mounted() {
    // 假設(shè)apiArr是我們發(fā)請(qǐng)求后端返回的數(shù)據(jù)，里面的imgTitle屬性存儲(chǔ)的是圖片的名字
    // 通過(guò)require關(guān)鍵字引入，會(huì)自動(dòng)到指定路徑下的文件中尋找對(duì)應(yīng)的圖片文件加載出來(lái)
    this.apiArr = [
      {
        title: "冠軍",
        score: "98.8",
        imgTitle: "first",
      },
      {
        title: "亞軍",
        score: "97.9",
        imgTitle: "second",
      },
      {
        title: "季軍",
        score: "96.2",
        imgTitle: "third",
      },
    ];
  },
};
</script>

效果圖如下

項(xiàng)目文件結(jié)構(gòu)圖

方式三（前端使用import）

代碼附上

<template>
  <div class="wrap">
    <div class="item" v-for="(item, index) in apiArr" :key="index">
      <div class="imgWrap">
        <img :src="item.imgTitle" alt="" />
      </div>
      <div class="infoWrap">
        <div><span class="bloder">名次：</span> {{ item.title }}</div>
        <div><span class="bloder">得分：</span> {{ item.score }}</div>
      </div>
    </div>
  </div>
</template>

<script>
// import 引入圖片
import first from "@/assets/img/first.png";
import second from "@/assets/img/second.png";
import third from '@/assets/img/third.png'
export default {
  data() {
    return {
      apiArr: [
        {
          title: "冠軍",
          score: "98.8",
          imgTitle: first, // 使用引入的圖片
        },
        {
          title: "亞軍",
          score: "97.9",
          imgTitle: second, // 使用引入的圖片
        },
        {
          title: "季軍",
          score: "96.2",
          imgTitle: third, // 使用引入的圖片
        },
      ],
    };
  },
};
</script>

效果圖和項(xiàng)目文件結(jié)構(gòu)圖同上，這里不贅述

以上是“v-for循環(huán)中如何使用require/import關(guān)鍵字引入本地圖片”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！