Vue.js 动态图像 src with require is not defined 错误

Question

我正在尝试将图像 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="game.gameLabel">.

所以我尝试像其他帖子中提到的那样使用 require 函数：<img :src="require(`../assets/cards/${game.gameLabel}.jpg`)" :alt="game.gameLabel"> 但是我遇到了致命错误 ReferenceError: require is not defined.

所以我被困在这一点上，我需要你的帮助来解决这个问题。

提前致谢。

Answer 1

将您的图像放入静态文件夹。
重命名为：

现在静态文件夹中有一个 cards 文件夹

Vue.js 动态图像 src with require is not defined 错误

Vue.js dynamic image src with require is not defined error

javascript

vue.js

vuejs3