vue 不在本地环境中显示 .svg 文件

Posted 2023-02-23

【中文标题】vue 不在本地环境中显示 .svg 文件

【英文标题】：vue does not display .svg file in local env

【发布时间】：2022-01-12 07:33:28

【问题描述】：

我现在正在用 Laravel、Vue2 做一些项目。 我将项目部署到测试服务器上，显示 .svg 文件，但在我的本地环境中它们不显示。 我在 vue 组件中使用:src="asset('images/ico_arrow_left1.svg')"。 我的图片和 svg 文件都在 root/public/images 文件夹中。

例如；我写了以下代码在 vue 组件中显示 svg。

<a @click="previousDay"><img class="ico_ico_arrow" :src="asset('images/ico_arrow_left1.svg')"></a>

代码在测试服务器和本地都是一样的。 测试服务器显示，本地不显示，为什么？

【参考方案1】：

如果你想从公共文件夹中导入文件，你应该检查documentation。导入动态资产时应使用 require。像这样：

<img class="ico_ico_arrow" :src="require('images/ico_arrow_left1.svg')"/>

【讨论】：

但是，在测试服务器中，svg 显示。 @Furkan Karakuze。

因为在您的服务器文件中，在本地，您需要从构建中提供类似“example.com/images/image.svg”的文件，因此您需要定义您需要公共文件夹中的图像，因此您使用 require 来导入您的图像跨度>

【参考方案2】：

asset() 辅助函数仅适用于 Laravel Blade 模板。你不能在常规的 Vue 应用程序中使用它。

在 Vue 中，你应该使用require()来解决这个问题。