我正在寻找正确的 url 来引用静态资产，例如 Vue javascript 中的图像。
例如，我正在使用自定义图标图像创建传单标记，并且尝试了多个 url，但它们都返回 404 (Not Found)：
Main.vue：
var icon = L.icon({
iconUrl: './assets/img.png',
iconSize: [25, 25],
iconAnchor: [12, 12]
});
我尝试将图像放在资产文件夹和静态文件夹中，但没有成功。我是否必须告诉 vue 以某种方式加载这些图像？
【问题讨论】：
标签： javascript vue.js leaflet
对于希望从模板中引用图像的任何人，您可以使用“@”直接引用图像
例子：
<img src="@/assets/images/home.png"/>
【讨论】：
This dependency was not found:* @/assets/more-ico.svg. To install it, you can run: npm install --save @/assets/more-ico.svg...
template 上，如果你想在css background-img 属性中使用，试试../../assets/bg/login.svg 之类的东西，将图像放入assets 文件夹中
在 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
这是a DEMO CODESANDBOX 展示它的实际效果。
【讨论】：
require('./assets/img.png') 在我的组件选项中对我不起作用，我不得不更换 .带有@：require('@/assets/img.png')。
在@acdcjunior 的回答中添加一些好的做法和安全性，使用@ 而不是./
在 JavaScript 中
require("@/assets/images/user-img-placeholder.png")
在 JSX 模板中
<img src="@/assets/images/user-img-placeholder.png"/>
使用@ 指向src 目录。
使用~ 指向项目根目录，这样更容易访问node_modules 和其他根级资源
【讨论】：
为了让 Webpack 返回正确的资源路径，你需要使用 require('./relative/path/to/file.jpg')，它会被 file-loader 处理并返回解析后的 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'
并将其用于图标 url iconUrl: someImage
【讨论】：
这终于对我有用，图像作为道具传递：
<img :src="require(`../../assets/${image}.svg`)">
【讨论】：
<img :src="require(`@/assets/${image}.svg`)">
../assets/country-flags-main/...svg)
你用的是什么系统？网络包？ Vue加载器？
我只会在这里集思广益......
因为 .png 不是 JavaScript 文件，你需要配置 Webpack 使用 file-loader 或 url-loader 来处理它们。用 vue-cli 搭建的项目也为你配置了这个。
您可以查看webpack.conf.js 以查看它是否像这样配置良好
...
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
...
/assets 用于在捆绑期间由 webpack 处理的文件 - 为此，它们必须在您的 javascript 代码中的某处引用。
其他资产可以放在/static，这个文件夹的内容稍后会原样复制到/dist。
我建议你尝试改变：
iconUrl: './assets/img.png'
到
iconUrl: './dist/img.png'
你可以在这里阅读官方文档：https://vue-loader.vuejs.org/en/configurations/asset-url.html
希望对你有帮助！
【讨论】：
使用这样的 require 语法对我有用：
$('.eventSlick').slick({
dots: true,
slidesToShow: 3,
slidesToScroll: 1,
autoplay: false,
autoplaySpeed: 2000,
arrows: true,
draggable: false,
prevArrow: '<button type="button" data-role="none" class="slick-prev"><img src="' + require("@/assets/img/icon/Arrow_Left.svg")+'"></button>',
【讨论】：
拥有由 Vue CLI 生成的文件夹的默认结构，例如 src/assets，您可以将图像放在那里并从 HTML 引用它，如下所示 <img src="../src/assets/img/logo.png">（自动运行，无需对部署进行任何更改）。
【讨论】：
我正在使用带有 vue 的 typescript，但这就是我的做法
<template><div><img :src="MyImage" /></div></template>
<script lang="ts">
import { Vue } from 'vue-property-decorator';
export default class MyPage extends Vue {
MyImage = "../assets/images/myImage.png";
}
</script>
【讨论】：
您可以根据您的环境定义资产路径
const dev = process.env.NODE_ENV != 'production';
const url = 'https://your-site.com';
const assets = dev ? '' : url;
<template>
<img :src="`${assets}/logo.png`"/>
<p>path: {{assets}}</p>
</template>
<script>
export default {
data: () => ({
assets
})
}
</script>
理想情况下，这将位于 utils js 文件中，或作为扩展应用程序定义属性，例如：
const app = createApp(component);
app.config.globalProperties.$assets = assets;
app.mount(element);
并且将作为：
<template>
<img :src="`${$assets}/logo.png`"/>
<p>path: {{$assets}}</p>
</template>
<script>
export default {
mounted() {
console.log(this.$assets);
}
}
</script>
【讨论】：
当然src="@/assets/images/x.jpg 有效，
但更好的方法是：
src="~assets/images/x.jpg
【讨论】：