404 Error on loading local image using vue

Question

I'm trying to make a simple dice roll game in VueJs but i'm having problems to use the dice images, it always gives 404 error and when i try to use require() it says it's not defined

Got a solution by using this method instead of using require() new URL('./components/icons/'+ this.img[this.dice-1], import.meta.url).href;

code:

App.vue

<template>
  <div>
    <button @click="roll">roll</button>
    <p> Resultado: {{dice}} </p>
    <div v-if="dice != 0">
      <img :src="selected"/>
    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        img: [
          '@/components/icons/dice1.png',
          '@/components/icons/dice2.png',
          '@/components/icons/dice3.png',
          '@/components/icons/dice4.png',
          '@/components/icons/dice5.png',
          '@/components/icons/dice6.png',
        ],
        selected: '',
        dice: 0,
      }
    },
    created(){
      this.selected = this.img[1];
    },methods:{
      roll: function(){
      this.dice = Math.ceil(Math.random() *6);
      this.select = this.img[this.dice];
      console.log(this.img[this.dice]);
      }
    }
  }
</script>

Main.js

import { createApp } from 'vue'
import App from './App.vue'


import './assets/main.css'

createApp(App).mount('#app')

Dvalin99 · Accepted Answer · 2022-09-28 15:21:39Z

1

I can't find require() in your code, but you could try the import statement:

import { ModuleName } from 'pathname'

answered Sep 28, 2022 at 15:21

Dvalin99

776 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JosephDoggie Over a year ago

Perhaps OP should load a different code area with the "require()" statement, or at least describe where the error occurs, please.

thiago RigStak Over a year ago

I solved it by using this mehtod: new URL('./components/icons/'+ this.img[this.dice-1], import.meta.url).href the error would be a get 404 not found in the image indicating the localhost/path, by adding this import import {require} from 'vue-loader'; i got error 504

Collectives™ on Stack Overflow

404 Error on loading local image using vue

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related