如何在Vue JavaScript中引用静态资产

达蒙猴子2020-03-11

我正在寻找引用静态资产的正确网址，例如Vue javascript中的图像。

例如，我正在使用自定义图标图像创建传单标记，并且尝试了多个网址，但它们都返回了一个404 (Not Found)：

Main.vue：

var icon = L.icon({
    iconUrl: './assets/img.png',
    iconSize:     [25, 25],
    iconAnchor:   [12, 12]
});

我试过将图像放在资产文件夹和静态文件夹中没有任何运气。我是否必须告诉Vue以某种方式加载这些图像？

达蒙逆天Pro2020/03/11 11:00:06

具有由Vue CLI生成的默认文件夹结构，例如，src/assets您可以将图像放置在此处，并按以下方式从HTML引用此图像<img src="../src/assets/img/logo.png">（也可以自动运行，而无需对部署进行任何更改）。

SamStafan十三2020/03/11 11:00:06

更好的解决方案是

在@acdcjunior的答案中添加一些好的做法和安全性，以@代替./

在JavaScript中

require("@/assets/images/user-img-placeholder.png")

在JSX模板中

<img src="@/assets/images/user-img-placeholder.png"/>

使用@指向src目录。

使用~指向项目根目录的点，这使得访问node_modules和其他根目录级资源更加容易

Newest Answer