vue.js - Vue 找不到模块图片位置

Question

我的项目遇到问题，找不到我的 png 图像的路径。我知道路径是正确的，因为如果我使用基本的硬编码 src="../assets/die1.png"，它工作正常。问题是我需要根据其他数据更改它们。

我不断收到错误消息:找不到模块“../assets/die1.png”

组件:

<template>
  <div class="DiceComponent col-3 bg-primary">
    <img v-if="die.output != ''" :src="require(die.output)" alt="error loading image" />
  </div>
</template> 

注意:die.output == "../assets/die1.png"这在 Vue 开发工具中得到了确认。

EDIT: This is currently what I get when it tries to load.

Answer 1

为了便于阅读，您可以将输出 变量更改为:

die.output == require('../assets/die1.png') 

或

die.output == require('@/assets/die1.png') 

然后

<template>
  <div ...>
    <img ... :src="die.output" ... />
  </div>
</template>