Why my value image does'nt load on Vue.js 3?

Question

I'm trying to get my image load via relative path and use value binding with v-for but the website keeps telling me that the website can't get the image, here's the template code.

            <Transition name="slide" v-for="Image in img4">
                <img :src="Image.image" alt="img" v-if="Image.imgindex == imgdex" class="img4">
            </Transition>

and here's the dictionary.

img4: [{image: '../assets/img/item4/page1/img1.png', imgindex: 1}, {image: "../assets/img/item4/page1/img2.jpg", imgindex: 2}, {image: "../assets/img/item4/page1/img3.png", imgindex: 3}, {image: "../assets/img/item4/page1/img4.png", imgindex: 4}]

in theory, image 1 would show if the variable 'imgdex' is 1 but even if I remove the v-if statement it still wouldn't load, the image is not corrupted if I change the image the website still couldn't get the image. is there something I can do to fix this? (sorry if something obviously wrong I'm a newbie in Vuejs)

edit: the error line in inspect mode is 'GET http://localhost:8080/assets/img/item4/page1/img1.png [HTTP/1.1 404 Not Found 3ms]'

`image` string won't be processed as a module automatically, you need to explicitly import an image when `src` is a var — Estus Flask, Jul 03 '23 at 13:15

score 0 · Accepted Answer · answered Jul 04 '23 at 10:42

oh I know the answer, I just had to add "require" in the path to the image

[{image:  require(`@/assets/img/item4/page1/img1.png`), imgindex: 1, alt: 'img1'}, {image: require(`@/assets/img/item4/page1/img2.jpg`), imgindex: 2, alt: 'img2'}, {image: require(`@/assets/img/item4/page1/img3.png`), imgindex: 3, alt: 'img3'}, {image: require(`@/assets/img/item4/page1/img4.png`), imgindex: 4, alt: 'img4'}]

I don't know what require to do but apparently, it work!

Why my value image does'nt load on Vue.js 3?

1 Answers1