我正在寻找引用静态资产的正确网址，例如Vue javascript中的图像。

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

Main.vue：

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="字符串。

在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

这是演示其动作的DEMO CODESANDBOX。

为了使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
  }
}

请参阅VueJS模板-处理静态资产

更好的解决方案是

在@acdcjunior的答案中添加一些好的做法和安全性，以@代替./

在JavaScript中

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

在JSX模板中

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

使用@指向src目录。

使用~指向项目根目录的点，这样可以更轻松地访问node_modules和其他根目录级资源

在添加脚本标签后，只需添加import someImage from '../assets/someImage.png' 并用于图标网址iconUrl: someImage

您正在使用什么系统？Webpack？Vue加载器？

我只会在这里集思广益...

由于.png不是JavaScript文件，因此您需要将Webpack配置为使用文件加载器或url加载器来处理它们。装有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 CLI生成的默认文件夹结构，例如，src/assets您可以将图像放置在此处，并按以下方式从HTML引用它<img src="../src/assets/img/logo.png">（也可以自动运行，部署时也无需任何更改）。

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

当然src="@/assets/images/x.jpg可以，但是更好的方法是： src="~assets/images/x.jpg