CODEWITHSUNDEEP
javascriptvue.jsvuejs3vue-component
Demo Nomp
Demo Nomp

Reputation: 33

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

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]'

Upvotes: 1

Views: 561

Answers (2)

Omar Hegazi
Omar Hegazi

Reputation: 129

Try this

(script setup)

const getImage = (imgPath) => {
  return new URL(`../../assets/images/icons/${imgPath}`, import.meta.url).href
}

(HTML Template)

                <img
                  :src="getImage(message.userAvatarUrl)"
                  class="userMessage-header-img mr-2"
                  alt="User Avatar"
                />

Upvotes: 0

Demo Nomp
Demo Nomp

Reputation: 33

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!

Upvotes: 0

Related Questions