你用的是什么系统? Webpack? Vue-loader？

我只是在这里头脑风暴..。

因为。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

希望对你有帮助！

在 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

这是 a DEMO CODESANDBOX 的实际演示。

为了让 Webpack 返回正确的资产路径，您需要使用 request (’。/relant/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
}
}

参见 VueJS 模板-处理静态资产

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

例如:

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

在打开脚本标记之后，添加 import someImage from '../assets/someImage.png' 并使用它为一个图标网址 iconUrl: someImage

更好的解决办法是

在@acdcJunior 的回答中添加一些好的实践和安全性，使用 @而不是 ./

在 JavaScript 中

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

在 JSX 模板中

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

使用指向 src目录的 @点。

使用指向项目根目录的 ~点，这使得访问 node_modules和其他根目录级别的资源变得更加容易

有一个由 Vue CLI 生成的默认文件夹结构，比如 src/assets，你可以把你的图像放在那里，也可以像下面的 <img src="../src/assets/img/logo.png">一样从 HTML 中引用它(在部署时也可以自动工作而不需要做任何更改)。

我使用 vue 的打字稿，但是我是这样做的

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

这最终为我工作，形象作为道具传递:

<img :src="require(`../../assets/${image}.svg`)">

它通过使用像下面这样的需求语法对我起作用:

$('.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>',

您可以根据环境定义资产路径

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>

将它们装载到创建、安装或需要它们的位置

async created() {
try {
this.icon = (await import('@assets/images/img.png')).default;
} catch (e) {
// explicitly ignored
}

然后

<img :src=icon />

内部代码可以直接要求使用。

const src = require("../../assets/images/xyz.png");

或者

为了动态加载图像需要这样做。

const image = new window.Image();
image.src = require("../../assets/images/xyz.png");
image.onload = () => {
// do something if needed
};