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

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related