如何在vue javascript中引用静态资产

Question

我正在寻找正确的url来引用静态资产，比如VUEJavaScript中的图像。

例如，我正在使用自定义图标图像创建传单标记，我尝试了几个URL，但它们都返回404（未找到）：

Main.vue：

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

我试过把图像放在资产文件夹和静态文件夹，但没有运气。我必须告诉Vue以某种方式加载那些图像吗？

Answer 1

在@acdcjunior的回答中添加了一些好的做法和安全性，使用@而不是/

在JavaScript中

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

在JSX模板中

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

使用@指向src目录。

使用~指向项目根目录，这样更容易访问节点\u模块和其他根目录级资源

Answer 2

在Vue常规设置中，不提供/资产。

图像变为src=“data:image/png；base64，iVBORw0K…YII=”字符串。

要从JS代码中获取图像，请使用require（'../assets.myImage.png'）。路径必须是相对的（见下文）。

所以你的代码应该是：

var icon = L.icon({
    iconUrl: require('./assets/img.png'),   // was iconUrl: './assets/img.png',
//  iconUrl: require('@/assets/img.png'), // use @ as alternative, depending on the path
    // ...
});

例如，假设您具有以下文件夹结构：

- src
  +- assets
     - myImage.png
  +- components
     - MyComponent.vue

如果要引用MyComponent.vue中的图像，路径应为。/assets/myImage.png

下面是一个演示代码沙盒，展示了它的实际应用。

Answer 3

对于希望从模板中引用图像的任何人，可以使用“@”直接引用图像

例子：

<img src="@/assets/images/home.png"/>