ไม่สามารถแสดงภาพด้วย v-bind ใน v-for loop

Question

ฉันรู้ว่ามีคำถามและคำตอบมากมายเกี่ยวกับวิธีใช้ v-bind ใน v-for เพื่อผูกกับ img src ... อย่างไรก็ตามฉันใช้เวลาทั้งวันในการทดลองโดยเปล่าประโยชน์ ฉันขอโทษสำหรับคำถามที่ซ้ำกัน แต่มีใครช่วยฉันได้บ้าง

ฉันใช้ [email protected] และ @ vue / cli 4.5.6 ฉันพยายามแสดงภาพหลายภาพใน v-for loop การผูกพา ​​ธ ไฟล์ไปยัง img src ฉันมีข้อมูลทักษะใน skills.json พยายามแสดงใน Skills.vue โค้ดด้านล่างแสดงหน้าจอว่างเปล่า

ความช่วยเหลือใด ๆ ที่ชื่นชมขอบคุณ

skills.json

[
  {
    "id": 1,
    "name": "C#",
    "logo": "C-Sharp.svg"
  },
  {
    "id": 2,
    "name": "Azure",
    "logo": "azure.svg"
  }
]

Skills.vue

เมื่อดูเครื่องมือสำหรับนักพัฒนา vue ฉันสามารถยืนยันได้ว่าข้อมูลถูกนำเข้าสู่อาร์เรย์ทักษะอย่างถูกต้อง (แต่ไม่ปรากฏขึ้น)

<template>
  <div class="container">
    <div class="items">
      <div class="item" v-for="skill in skills" :key="skill.id">
        <img :src="require(`${logoPath}${skill.logo}`)" />
      </div>
    </div>
  </div>
</template>

<script>
import skillsJson from '../assets/skills.json';

export default {
    data() {
        return {
            skills: skillsJson,
            logoPath: '../assets/img/',
        };
    },
};
</script>

โครงสร้างโฟลเดอร์ src

C:.
│  App.vue
│  main.js
├─assets
│  │  skills.json
│  ├─icons
│  ├─img
│  │      azure.svg
│  │      C-Sharp.svg
│  └─scss
├─components
├─router
│      index.js
└─views
        Experience.vue
        HelloWorld.vue
        Home.vue
        Skills.vue

Answer 1

คุณต้องเข้าใจว่าrequire()(หรือimport()) ได้รับการจัดการโดย Webpack ในเวลาสร้าง Webpack ไม่สามารถรันโค้ดของคุณได้ (ในเวลาสร้าง) และอาจรู้ว่าค่ารันไทม์จะเป็นเท่าใด ดูเอกสาร (เกี่ยวกับimport()แต่require() เกือบจะเหมือนกัน )

การแก้ไขง่ายๆคือการสร้างเฉพาะบางส่วนของพา ธ ไดนามิกเพื่อให้ Webpack ได้รับคำแนะนำอย่างน้อยว่าไฟล์ใดควรจะพร้อมใช้งาน ...

แทนที่

<img :src="require(`${logoPath}${skill.logo}`)" />

โดย

<img :src="require(`../assets/img/${skill.logo}`)" />

TLDR

require()ความต้องการของ Webpack อย่างน้อยบางส่วนของเส้นทางไฟล์จึงจะคงที่อย่างสมบูรณ์!