无涯教程网

Vue 组件中的图像不适用于 Vite + Laravel

发布于06月07日

在使用Laravel和VitE之前，所有的图像都运行良好.现在，来自Vue组件内部的图像停止工作，无法找到任何解决方案.

我在里面放了这些拉瓦尔的图片:

/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

但在Blade 模板中直接使用的在LAVELL上提供的图像可以找到并正常工作:

http://127.0.0.1:5173/resources/images/flag.svg

在运行npm run build之后，所有的图像都出现在public/build folder中，但在前端看不到

推荐答案

我重构了当前的方法，所以我现在使用方法来匹配文件夹中的图像，而不是从导入的文件夹中获取所有图像，如下所示:

 getDriverImage(name) {
            return new URL(`/src/assets/images/drivers/2023/${name}.webp`, import.meta.url).href
        },

这是图像在npm run build之后正确变换的唯一方法.这是一种不同的方法，您必须知道准确的图像名称以匹配资源，而不是以前的import.meta.glob()，其中文件夹中的所有资源都已返回.

Laravel相关问答推荐

如何使中继器项目计数动态Laravel Filament V3？

Laravel：通过数据透视表数据限制多对多Eager 加载

Laravel：在 PHPUnit 的覆盖率报告中包含文件夹(如果在 app/ 文件夹之外)？

验证判断请求的值是否存在于另一个表 Laravel 9 中

如何提取每组 groupBy 查询的唯一值？

当使用Laravel eloquent查询100000条数据时速度很慢

Laravel 5.4 中的自定义助手类

如何在 NetBeans 中添加带有点 (blade.php) 的自定义文件扩展名？

未找到 PHP 5.4 和 Laravel 类Memcached

从 sqlite DB 登录 Laravel，得到PDOException 找不到驱动程序

错误：您的要求无法解析为一组可安装的软件包.

Auth 在 Laravel Tinker 中不起作用

Laravel 分页方法不适用于 map 集合？

Laravel 在特定文件夹中创建迁移文件

无法打开流：没有这样的文件或目录(Laravel)

laravel 5.1 在没有 VM 重启的情况下看不到作业(job)文件的更改

Laravel 5.3 通知 - 仅使用Electron邮件地址通知

如何卸载 Laravel Passport

限制自己重载外部 API 的速率

有没有办法让表名自动添加到 Eloquent 查询方法中？

实用课程推荐

相关教程推荐