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

Question

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

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

主.vue：

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

我尝试将图像放在资产文件夹和静态文件夹中，但没有成功。我是否必须告诉 vue 以某种方式加载这些图像？

原文由 JBaczuk 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

例子：

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

原文由 azy777 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

图像变为 src="data:image/png;base64,iVBORw0K...YII=" 字符串，而不是。

在 JavaScript 中使用： require()

要从 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

这是 一个演示代码沙盒，展示了它的实际效果。

原文由 acdcjunior 发布，翻译遵循 CC BY-SA 4.0 许可协议