我正在嘗試將影像 src 動態系結到 v-for 回圈中的 url，如下所示：
<script>
export default {
name: 'Home',
data() {
return {
games: [
{"gameId": 1365, "gameLabel": "ssbu"},
{"gameId": 1366, "gameLabel": "ggs"},
{"gameId": 1367, "gameLabel": "sf5"},
]
}
}
};
</script>
<template>
<div v-for="game in games"">
<img :src="`../assets/cards/${game.gameLabel}.jpg`" :alt="game.gameLabel">
</div>
</template>
但是我遇到了錯誤GET http://localhost:3000/assets/cards/ssbu.jpg 404 (Not Found)，盡管我這樣做時效果很好：<img src="../assets/cards/ssbu.jpg" :alt="帶有require的Vue.js動態影像src未定義錯誤">。
所以我嘗試使用 require 函式，就像人們在其他帖子中提到的那樣：<img :src="require(`../assets/cards/${game.gameLabel}.jpg`)" :alt="帶有require的Vue.js動態影像src未定義錯誤">但是我遇到了致命錯誤ReferenceError: require is not defined。
所以我被困在這一點上，我需要你的幫助來解決這個問題。
提前致謝。
uj5u.com熱心網友回復：
將影像放入靜態檔案夾。
重命名為：
現在您cards在靜態檔案夾中有一個檔案夾
uj5u.com熱心網友回復：
assets 檔案夾中的所有內容都將由 Webpack 處理，而 public 檔案夾中的所有內容都只是簡單地復制，但不會通過 Webpack。因此，如果您想在構建程序中利用 webpacks 的優化功能，請將它們放在 assets 中。assets 檔案夾通常是您放置影像/視頻/字體/svgs 等的地方，您將匯入到視圖檔案中。您未明確匯入的 assets 檔案夾中的專案不會最終出現在您的 dist 檔案夾中，以免增加檔案的最終大小。
要訪問 Vue 中資產檔案夾中的影像，我們將：
:src = "require('@/assets/images/myimage.jpg')"
要訪問 Vue 中公共檔案夾中的影像，我們將：
:src="./static/images/myimage.jpg"
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/473070.html