Search code examples
vue.jsmodulesrc

Vue cannot find module image location

I'm having a problem with my project not finding the path to my png images. I know the path is correct because if I use a basic hard coded src="../assets/die1.png", it works fine. The problem is I need them to changed based on other data.

I keep getting the error: Cannot find module '../assets/die1.png'

COMPONENT:

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

NOTE: die.output == "../assets/die1.png" and this is confirmed in the Vue devtool.

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

Solution

  • I am getting some error in your store functions that I can solve now so I focused on the image question. As you are working with static files, I've moved them to public folder and have made a simple rollDice function:

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

    then:

    <Die :die="diceTemp" />

    inside the component:

    <img :src="die" />

    and this works fine! Somethings to consider: