รูปภาพไม่แสดงในลูป Vue.js [ซ้ำ]

Aug 17 2020

ฉันพยายามแสดงภาพ 9 ภาพแบบวนซ้ำโดยใช้v-forไฟล์.

แต่พวกเขาไม่ได้แสดง ถ้าฉันแสดงโดยไม่มีการวนซ้ำมันก็ใช้ได้

ฉันกำลังแยกทรัพยากรที่ถูกต้อง แต่ก็ยังไม่แสดง

นี่คือรหัสของฉัน:

<img class="list-complete-img" src="../assets/g1.jpg" alt="" /> //This works
<div v-for="item in data.items" :key="item.id">
    <div>
        {{ item.src }} // Just to check if I am printing right
    </div>
    <img class="list-complete-img" :src="item.src" :alt="item.src" /> // This does not work
</div>

ตอนนี้ผลลัพธ์ที่ฉันได้รับคือ:

นี่คือของฉันdata.json:

 "items": [
    { "id": "1", "src": "../assets/g1.jpg", "tags": ["all", "tag1"] },
    { "id": "2", "src": "../assets/g2.png", "tags": ["all", "tag2"] },
    { "id": "3", "src": "../assets/g3.png", "tags": ["all", "tag2"] },
    { "id": "4", "src": "../assets/g4.png", "tags": ["all", "tag1"] },
    { "id": "5", "src": "../assets/g5.png", "tags": ["all", "tag1"] },
    { "id": "6", "src": "../assets/g6.png", "tags": ["all", "tag2"] },
    { "id": "7", "src": "../assets/g7.jpg", "tags": ["all", "tag1"] },
    { "id": "8", "src": "../assets/g8.png", "tags": ["all", "tag2"] },
    { "id": "9", "src": "../assets/g9.png", "tags": ["all", "tag2"] }
  ]

แก้ไข

จนถึงตอนนี้ฉันสังเกตว่าปัญหาอยู่ที่ไฟล์src. หากฉันใช้ลิงก์รูปภาพมันก็ใช้งานได้ดี แต่ไม่ใช่กับภาพในเครื่อง (เฉพาะในกรณีที่ฉันใช้ภาพท้องถิ่นจำนวนมากในการวนซ้ำและทำงานได้ดีในภาพเดียว) ดังนั้นสิ่งที่ฉันทำได้คือใส่ไดเร็กทอรีไฟล์ที่นี่ ฉันอยากจะแนะนำหากมีใครสามารถลองใช้คอมพิวเตอร์ในพื้นที่ของคุณและลองอัปโหลดภาพจากไดเรกทอรีไฟล์ของคุณแบบวนซ้ำแล้วโพสต์ที่นี่


แก้ไขแล้ว

มันต้องการคำสั่งนี้อย่างแน่นอน: requireไดเร็กทอรีพา ธ และชื่ออิมเมจ

<div v-for="item in items" :key="item.id">
    <div>
        {{ item.src }}
    </div>
    <img
        class="list-complete-img"
        :src="require(`../assets/${item.src}`)"
        :alt="item.src"
    />
</div>

คำตอบ

2 vchan Aug 17 2020 at 15:17

นี่เป็นปัญหาที่เกี่ยวข้องกับคำพูดต่อไปนี้ของ Evan You ซึ่งสามารถพบได้ที่นี่ :

เนื่องจาก imagePath แสดงผลโดย Vue ขณะรันไทม์เท่านั้น Webpack จึงไม่มีโอกาสเขียนซ้ำ

JavaScriptรหัสของคุณต้องเป็นดังนี้:

export default {
  name: "App",
  data: function () {
    return {
      items: [
        { id: "1", src: "logo.png", tags: ["all", "tag1"] },
        { id: "2", src: "logo.png", tags: ["all", "tag2"] },
        { id: "3", src: "logo.png", tags: ["all", "tag2"] },
        { id: "4", src: "logo.png", tags: ["all", "tag1"] },
        { id: "5", src: "logo.png", tags: ["all", "tag1"] },
        { id: "6", src: "logo.png", tags: ["all", "tag2"] },
        { id: "7", src: "logo.png", tags: ["all", "tag1"] },
        { id: "8", src: "logo.png", tags: ["all", "tag2"] },
        { id: "9", src: "logo.png", tags: ["all", "tag2"] },
      ],
    };
  },
  methods: {
    getImgUrl: function (imagePath) {
      return require('@/assets/' + imagePath);
    }
  }
};

หลังจากนั้นคุณต้องเรียกgetImgUrlใช้ฟังก์ชันของคุณโดยส่งชื่อไฟล์ ของคุณHTMLจะเป็นเช่นนี้:

<div id="app">
  <img class="list-complete-img" src="./assets/logo.png" />
  <div v-for="item in items" :key="item.id">
    <img class="list-complete-img" :src="getImgUrl(item.src)" />
  </div>
</div>

เนื่องจากฉันไม่สามารถเข้าถึงรูปภาพของคุณได้ฉันจึงมีเสรีภาพที่จะใช้โลโก้ Vue เป็นรูปภาพ

โดยสรุปปัญหาข้างต้นต้องทำเช่นนั้นเมื่อVueคอมไพล์จะใช้เนื้อหาทั้งหมดและวางไว้ในโฟลเดอร์อื่นเช่นภาพด้านล่าง:

ทำตามรูปแบบนี้และตัวอย่างของคุณก็จะใช้ได้เช่นกัน สนุก!

แก้ไข: หากต้องการคุณสามารถวางเนื้อหาแบบคงที่ไว้ในโฟลเดอร์สาธารณะได้ ด้วยวิธีนี้คุณจะสามารถเขียนเส้นทางแบบคงที่สำหรับสินทรัพย์ของคุณได้

1 ehsan Aug 17 2020 at 13:34

ลองสิ่งนี้: v-for="(item, i) in items" :key="i"

1 Tony Aug 17 2020 at 17:34

ในการใช้ภาพไดนามิกให้ใช้ต้องใช้ () เปลี่ยนสิ่งที่คุณมีให้เป็นสิ่งนี้

<div id="app">
    <div v-for="item in data.items" :key="item.id">
        <img ... :src="require(item.src)" />
    </div>
</div>

saiprabhav Aug 17 2020 at 19:19

คุณสามารถใช้ for loop ซึ่งอาจช่วยแก้ไขฉันได้ถ้าฉันผิด