Vue не удается найти расположение изображения модуля - PullRequest
Новая
       79

Vue не удается найти расположение изображения модуля

0 голосов
/ 04 августа 2020

У меня проблема с моим проектом, когда я не могу найти путь к моим изображениям png. Я знаю, что путь правильный, потому что, если я использую basi c жестко запрограммированный 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>

ПРИМЕЧАНИЕ: d ie .output == "../assets/die1.png", и это подтверждается в Vue devtool.

EDIT: это в настоящее время что я получаю, когда он пытается загрузиться.

Ответы [ 2 ]

0 голосов
/ 04 августа 2020

Замените то, что у вас есть сейчас, на 

<template>
  <div ...>
    <img ... :src="require(`${die.output}`)" ... />
  </div>
</template>
0 голосов
/ 04 августа 2020

Я получаю некоторую ошибку в функциях вашего магазина, которую я могу решить сейчас, поэтому я сосредоточился на вопросе изображения. Поскольку вы работаете с файлами stati c, я переместил их в папку publi c и сделал простую функцию rollDice: 

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

затем: 

<Die :die="diceTemp" />

внутри компонента: 

<img :src="die" />

, и это отлично работает! Что следует учитывать:

  • Если вы используете хранилища, вы можете использовать значения d ie внутри вашего компонента D ie и избегать использования вложенных значений (d ie .output) props (vuejs .org / v2 / guide / reactivity. html)
...