英文:
Why my value image does'nt load on Vue.js 3?
问题
我试图通过相对路径加载我的图片，并在v-for中使用值绑定，但网站一直告诉我找不到图片，这是模板代码。
<Transition name="slide" v-for="Image in img4">
<img :src="Image.image" alt="img" v-if="Image.imgindex == imgdex" class="img4">
</Transition>
这是字典。
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}]
理论上，如果变量'imgdex'为1，图像1将显示，但即使我移除v-if语句，它仍然不会加载，如果我更改图像，网站也无法获取图像，是否有办法解决这个问题？（对不起，如果有明显错误，我是Vuejs的新手）
编辑：检查模式中的错误行是'GET
http://localhost:8080/assets/img/item4/page1/img1.png
[HTTP/1.1 404 Not Found 3ms]'。
英文:
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]'
答案1
得分: 0
我知道答案，我只需要在图像路径中添加 "require"。
[{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'}]
我不知道 "require" 要做什么，但显然它起作用了！
英文:
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!
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论