如何在vue javascript中引用静态资产

Question

我正在寻找引用静态资产的正确网址,例如Vue javascript中的图片.

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

Main.vue:

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

我已经尝试将图像放在assets文件夹和静态文件夹中,没有运气.我是否必须告诉vue以某种方式加载这些图像？

Answer 1

对于想要从模板中引用图像的任何人,您可以使用"@"直接引用图像

例:

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

Answer 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',
    // ...
});

使用相对路径

例如,假设您具有以下文件夹结构:

- src
  +- assets
     - myImage.png
  +- components
     - MyComponent.vue

如果你想引用图像MyComponent.vue,路径应该是../assets/myImage.png

这是一个DEMO CODESANDBOX,展示了它的实际效果.

Answer 3

更好的解决方案是

在@acdcjunior 的答案中添加一些良好的做法和安全性，以使用@而不是./

在 JavaScript 中

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

在 JSX 模板中

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

使用@指向src目录。

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

Answer 4

为了让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模板 - 处理静态资产

Answer 5

这终于对我有用，图像作为道具传递：

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

Answer 6

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