如何在 vue javascript 中引用静态资产
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47313165/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to reference static assets within vue javascript
提问by JBaczuk
I'm looking for the right url to reference static assets, like images within Vue javascript.
我正在寻找正确的 url 来引用静态资产，比如 Vue javascript 中的图像。
For example, I'm creating a leaflet marker using a custom icon image, and I've tried several urls, but they all return a 404 (Not Found):
例如，我正在使用自定义图标图像创建传单标记，并且我尝试了几个 url，但它们都返回一个404 (Not Found)：
Main.vue:
主视图：
var icon = L.icon({
iconUrl: './assets/img.png',
iconSize: [25, 25],
iconAnchor: [12, 12]
});
I've tried putting the images in the assets folder and the static folder with no luck. Do I have to tell vue to load those images somehow?
我试过将图像放在资产文件夹和静态文件夹中，但没有运气。我是否必须告诉 vue 以某种方式加载这些图像？
回答by azy777
For anyone looking to refer images from template, You can refer images directly using '@'
对于希望从模板中引用图像的任何人，您可以使用“@”直接引用图像
Example:
例子：
<img src="@/assets/images/home.png"/>
回答by acdcjunior
In a Vue regular setup, /assetsis not served.
在 Vue 常规设置中，/assets不提供服务。
The images become src="data:image/png;base64,iVBORw0K...YII="strings, instead.
src="data:image/png;base64,iVBORw0K...YII="相反，图像变成了字符串。
Using from within JavaScript: require()
在 JavaScript 中使用： require()
To get the images from JS code, use require('../assets.myImage.png'). The path must be relative (see below).
要从 JS 代码中获取图像，请使用require('../assets.myImage.png'). 路径必须是相对的（见下文）。
So your code would be:
所以你的代码是：
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
// ...
});
Use relative path
使用相对路径
For example, say you have the following folder structure:
例如，假设您有以下文件夹结构：
- src
+- assets
- myImage.png
+- components
- MyComponent.vue
If you want to reference the image in MyComponent.vue, the path sould be ../assets/myImage.png
如果你想在 中引用图像MyComponent.vue，路径应该是../assets/myImage.png
Here's a DEMO CODESANDBOXshowing it in action.
这是一个演示代码沙盒，展示了它的实际效果。
回答by Yuci
In order for Webpack to return the correct asset paths, you need to use require('./relative/path/to/file.jpg'), which will get processed by file-loader and returns the resolved URL.
为了让 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
}
}
回答by Muhammad
A better solution would be
更好的解决方案是
Adding some good practices and safity to @acdcjunior's answer, to use @instead of ./
在@acdcjunior 的答案中添加一些良好的做法和安全性，以使用@而不是./
In JavaScript
在 JavaScript 中
require("@/assets/images/user-img-placeholder.png")
In JSX Template
在 JSX 模板中
<img src="@/assets/images/user-img-placeholder.png"/>
using @points to the srcdirectory.
using@指向src目录。
using ~points to the project root, which makes it easier to access the node_modulesand other root level resources
using~指向项目根目录，这样可以更轻松地访问node_modules和其他根级别资源
回答by neberaa
Right after oppening script tag just add import someImage from '../assets/someImage.png'and use it for an icon url iconUrl: someImage
打开脚本标签后，只需添加import someImage from '../assets/someImage.png'并将其用于图标 urliconUrl: someImage
回答by JP. Aulet
What system are you using? Webpack? Vue-loader?
你用的是什么系统？网络包？Vue 加载器？
I'll only brainstorming here...
我只会在这里集思广益......
Because .png is not a JavaScript file, you will need to configure Webpack to use file-loader or url-loader to handle them. The project scaffolded with vue-cli has also configured this for you.
因为 .png 不是 JavaScript 文件，你需要配置 Webpack 使用 file-loader 或 url-loader 来处理它们。用 vue-cli 搭建的项目也为你配置了这个。
You can take a look at webpack.conf.jsin order to see if it's well configured like
您可以查看一下，webpack.conf.js看看它是否配置良好
...
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
...
/assetsis for files that are handles by webpack during bundling - for that, they have to be referenced somewhere in your javascript code.
/assets用于在捆绑期间由 webpack 处理的文件 - 为此，必须在您的 javascript 代码中的某处引用它们。
Other assets can be put in /static, the content of this folder will be copied to /distlater as-is.
可以放入其他资产/static，此文件夹的内容将按/dist原样复制到以后。
I recommend you to try to change:
我建议你尝试改变：
iconUrl: './assets/img.png'
iconUrl: './assets/img.png'
to
到
iconUrl: './dist/img.png'
iconUrl: './dist/img.png'
You can read the official documentation here: https://vue-loader.vuejs.org/en/configurations/asset-url.html
你可以在这里阅读官方文档：https: //vue-loader.vuejs.org/en/configurations/asset-url.html
Hope it helps to you!
希望对你有帮助！
回答by Daniel Danielecki
Having a default structure of folders generated by Vue CLI such as src/assetsyou can place your image there and refer this from HTML as follows <img src="../src/assets/img/logo.png">as well (works automatically without any changes on deployment too).
拥有由 Vue CLI 生成的默认文件夹结构，例如src/assets您可以将图像放在那里并从 HTML 中引用它，如下所示<img src="../src/assets/img/logo.png">（自动工作，无需对部署进行任何更改）。
回答by Michael
I'm using typescript with vue, but this is how I went about it
我在 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>
回答by Farzad.Kamali
Of course src="@/assets/images/x.jpgworks,
but better way is:
src="~assets/images/x.jpg
当然src="@/assets/images/x.jpg有效，但更好的方法是：
src="~assets/images/x.jpg
