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 devtool 中得到了确认。

Answer 1

为了便于阅读，您可以将 output 变量更改为：

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> 

Answer 4

虽然很难，但我找到了方法

试试这个：

let imgName = "logo-blue.svg";

getLogo(imgName) {
const partName = imgName.split("logo-")[1];
return require("../img/logo-" + partName);
}

我不知道为什么，但如果你这样做了

return require("../img/" + imgName);

它就不起作用了，只要拆分它就可以了。

Answer 5

我也发现了这个问题，我用以下解决方案解决了这个问题：

<img :src="srcComputed" />

computed: {
  srcComputed() {
     return require(`@/assets/images/${this.srcProps}`);
  },
},

注意！我正在使用带有 Props“srcProps”的组件。