我正在寻找正确的 url 来引用静态资产，比如 Vue javascript 中的图像。
例如，我正在使用自定义图标图像创建传单标记，并且我尝试了几个 url，但它们都返回一个404 (Not Found)：
主视图：
var icon = L.icon({
iconUrl: './assets/img.png',
iconSize: [25, 25],
iconAnchor: [12, 12]
});
我试过将图像放在资产文件夹和静态文件夹中，但没有运气。我是否必须告诉 vue 以某种方式加载这些图像？
对于希望从模板中引用图像的任何人，您可以使用“@”直接引用图像
例子：
<img src="@/assets/images/home.png"/>
在 Vue 常规设置中，/assets不提供服务。
src="data:image/png;base64,iVBORw0K...YII="相反，图像变成了字符串。
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 的答案中添加一些良好的实践和安全性，以使用@而不是./
在 JavaScript 中
require("@/assets/images/user-img-placeholder.png")
在 JSX 模板中
<img src="@/assets/images/user-img-placeholder.png"/>
using@指向src目录。
using~指向项目根目录，这样可以更轻松地访问node_modules和其他根级别资源
为了让 Webpack 返回正确的资源路径，您需要使用 require('./relative/path/to/file.jpg')，它将被文件加载器处理并返回解析后的 URL。
computed: {
iconUrl () {
return require('./assets/img.png')
// The path could be '../assets/img.png', etc., which depends on where your vue file is
}
}
在打开脚本标签后，只需添加import someImage from '../assets/someImage.png'
并将其用于图标 urliconUrl: someImage