如何在Vue JavaScript中引用静态资产

JavaScript

达蒙猴子

2020-03-11

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

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

Main.vue：

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

我试过将图像放在资产文件夹和静态文件夹中没有任何运气。我是否必须告诉Vue以某种方式加载这些图像？

第574篇《如何在Vue JavaScript中引用静态资产》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答

达蒙逆天Pro 2020.03.11

具有由Vue CLI生成的默认文件夹结构，例如，src/assets您可以将图像放置在此处，并按以下方式从HTML引用此图像<img src="../src/assets/img/logo.png">（也可以自动运行，而无需对部署进行任何更改）。

SamStafan十三 2020.03.11

更好的解决方案是

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

在JavaScript中

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

在JSX模板中

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

使用@指向src目录。

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android