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

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

Answer 1

我在你的商店功能中遇到一些错误，我现在可以解决，所以我专注于图像问题。当您使用静态文件时，我已将它们移至 public 文件夹并制作了一个简单的 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) props (vuejs.org/v2/guide/reactivity.html)

Answer 2

将现有的替换为

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

Answer 3

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

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

或

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

然后

<template>
  <div ...>
    <img ... :src="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); 它不起作用，只有拆分它才有效。

Vue 找不到模块图片位置

Vue cannot find module image location

module

src

vue.js