目錄

• 問題描述
  
• 方式一（後端返回圖片URL）
  
• 方式二（前端使用require）
  
• 方式三（前端使用import）
  
• 總結
  

問題描述

我們做專案中，常常需要把圖片呈現到頁面上，一般來說有以下幾種方式

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

這種方式就是後端返回圖片的url地址，我們直接img標籤的src屬性繫結imgUrl即可。如下程式碼：

<div class="item" v-for="(item,index) in apiArr" :key="index">
    <!-- apiArr是後端返回的資料，其中的每一項中都有一個imgUrl屬性，儲存的是圖片的url地址 -->
    <img :src="item.imgUrl" alt="v-for迴圈中使用require/import關鍵字
 
引入本地圖片的幾種方式">
</div>

方式二（前端使用require）

第二種方式，把圖片檔案儲存到前端裡，後端只返回圖片的名字（或不返回圖片資料），程式碼舉例如下：

程式碼附上

<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="v-for迴圈中使用require/import關鍵字引入本地圖片的幾種方式" />
        <!-- 最後就變成這樣的了就能正常顯示了 <img src="@/assets/img/first.png" alt="v-for迴圈中使用require/import關鍵字引入本地圖片的幾種方式"> -->
      </div>
      <div class="infoWrap">
        <div><span class="bloder">名次：</span> {{ item.title }}</div>
        <div><span class="bloderYJQpPm
 
">得分：</span> {{ item.score }}</div>
      </div>
    </div>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      apiArr: [],};
  },mounted() {
    // 假設apiArr是我們發請求後端返回的資料，裡面的imgTitle屬性儲存的是圖片的名字
    // 通過require關鍵字引入，會自動到指定路徑下的檔案中尋找對應的圖片檔案加載出來
    this.apiArr = [
      {
        title: "冠軍",score: "98.8",imgTitle: "first",},{
        title: "亞軍",score: "97.9",imgTitle: "second",{
        title: "季軍",score: "96.2",imgTitle: "third",];
  },};
</script>

效果圖如下

專案檔案結構圖

方式三（前端使用ihttp://www.cppcns.commport）

程式碼附上

<template>
  <div class="wrap">
    <div class="item" v-for="(item,index) in apiArr" :key="index">
      <div class="imgWrap">
        <img :src="item.imgTitle" alt="v-for迴圈中使用require/import關鍵字引入本地圖片的幾種方式" />
      </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: "冠軍",imgTitle: first,// 使用引入的圖片
        },{
          title: "亞軍",imgTitle: second,{
          title: "季軍",imgTitle: third,],};
</script>

效果圖和專案檔案結構圖同上，這裡不贅述

總結

ES6中import方式引入，和common中require方式引入圖片都可以，不過我個人更加推薦使用require方式，因為略為靈活點

到此這篇關於v-for迴圈中使用require/import關鍵字引入本地圖片的文章就介紹到這了,更多相關v-for引入本地圖片內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！