如何在 vue javascript 中引用静态资源从 JavaScript 中使用：require() 使用相对路径

javascript vue.js leaflet

2022-08-30 02:41:40

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

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

Main.vue：

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

我尝试过将图像放在assets文件夹和静态文件夹中，但没有运气。我必须告诉 vue 以某种方式加载这些图像吗？

答案 1

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

例：

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

答案 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

如果要引用中的图像，则路径 sould 是MyComponent.vue../assets/myImage.png

这是一个演示代码和框，显示了它的实际效果。