英文:
Images inside Vue components not working with Vite + Laravel
问题
所有图片在使用laravel和Vite之前都可以正常工作。现在在Vue组件内部使用的图片停止工作了,找不到任何解决方法。
我在laravel内有这些图片:
/resources/images/drivers/2023/
Standings.vue (resources/js/components/sections/Standings.vue):
const driverImages = import.meta.glob("/resources/images/drivers/2023/*")
例如,通过以下方式提供的图片无法找到:
http://127.0.0.1:8000/images/countries/2023/backgrounds/catalunya.jpg
但是通过laravel提供的图片可以找到,直接在blade模板中使用:
http://127.0.0.1:5173/resources/images/flag.svg
在运行npm run build后,所有图片都会出现在public/build文件夹中,但在前端页面上看不到。
英文:
All of the images worked fine before using laravel with Vite. Now images from inside Vue components stopped working and can't find any solution for this.
I have these images in laravel inside:
/resources/images/drivers/2023/
Standings.vue (resources/js/components/sections/Standings.vue)
const driverImages = import.meta.glob("/resources/images/drivers/2023/*")
For example images that are served over are not found:
http://127.0.0.1:8000/images/countries/2023/backgrounds/catalunya.jpg
But images served over laravel are found and working that are used directly in blade template:
http://127.0.0.1:5173/resources/images/flag.svg
All of the images appear in public/build folder after running npm run build but are not visible on frontend
答案1
得分: 1
我重构了当前的方法,所以不再从导入的文件夹中获取所有图像,而是现在使用以下方法来匹配文件夹内的图像:
getDriverImage(name) {
return new URL(`/src/assets/images/drivers/2023/${name}.webp`, import.meta.url).href
},
这是唯一的方法,在运行 npm run build 后正确转换图像。这是一种不同的方法,您现在必须知道确切的图像名称以匹配资源,而不是之前使用的 import.meta.glob(),它会返回文件夹内的所有资源。
英文:
I refactored current method so instead of getting all images from imported folder, I now use method to match images inside folder like this:
getDriverImage(name) {
return new URL(`/src/assets/images/drivers/2023/${name}.webp`, import.meta.url).href
},
This is the only way where images are transformed correctly after npm run build. This is now different approach, where you have to know exact image name to match the asset, vs previous import.meta.glob() where all assets inside folder were returned.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。


评论