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> 

Answer 2

我在您的商店功能中遇到了一些我现在可以解决的错误，因此我专注于图像问题。当您使用静态文件时，我已将它们移至公用文件夹并制作了一个简单的 rollDice 函数：

rollDice() {
   let rng = Math.floor(Math.random() * 6);
   this.diceTemp = `./die${rng+1}.png`
},

然后：

<Die :die="diceTemp" />

组件内部：

<img :src="die" />

这很好用！需要考虑的事项：

• 如果您使用商店，您可以在 Die 组件中使用 die 值，并避免使用嵌套值 (die.output) 道具 (vuejs.org/v2/guide/reactivity.html)

Answer 3

替换你现在拥有的

<template>
  <div ...>
    <img ... :src="require(`${die.output}`)" ... />
  </div>
</template>