javascript Vue.js 2：Vue 无法从 /assets 文件夹中找到文件 (v-for)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/52082968/
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
Vue.js 2: Vue cannot find files from /assets folder (v-for)
提问by Stephen
I am using Vue-cli 3 with Webpack, and my folder structure looks like this:
我在 Webpack 中使用 Vue-cli 3，我的文件夹结构如下所示：
/public
/src
/assets
p1.jpg
p2.jpg
App.vue
main.js
I read in several places that in order for Webpack to know where your /assets are, you should use require() if you are in Javascript land.
我在几个地方读到，为了让 Webpack 知道你的 /assets 在哪里，如果你在 JavaScript 领域，你应该使用 require() 。
I have determined that this code works:
我已经确定此代码有效：
<template>
<div>
<ul>
<li v-for="photo in photos" :key="photo.id">
<img :src="photo.imageUrls.default" />
</li>
</ul>
</div>
</template>
<script>
/* For webpack to resolve URLs in javascript during the build, you need the require() function */
export default {
data() {
return {
photos: [
{
id: 1,
caption: 'P1',
series: '',
notes: '',
imageUrls: {
default: require('./assets/p1.jpg')
}
},
{
id: 2,
caption: 'P2',
series: '',
notes: '',
imageUrls: {
default: require('./assets/p2.jpg')
}
}
]
}
}
}
</script>
But, this does not work. I am seeing an error in the console: "Error: Cannot find module './assets/p1.jpg'"
但是，这不起作用。我在控制台中看到一个错误：“错误：找不到模块 './assets/p1.jpg'”
<template>
<div>
<ul>
<li v-for="photo in photos" :key="photo.id">
<img :src="imagePath(photo)" />
</li>
</ul>
</div>
</template>
<script>
/* For webpack to resolve URLs in javascript during the build, you need the require() function */
export default {
data() {
return {
photos: [
{
id: 1,
caption: 'P1',
series: '',
notes: '',
imageUrls: {
default: './assets/p1.jpg'
}
},
{
id: 2,
caption: 'P2',
series: '',
notes: '',
imageUrls: {
default: './assets/p2.jpg'
}
}
]
}
},
methods: {
imagePath(photo) {
return require(photo.imageUrls.default);
}
}
}
</script>
Is there anybody who can help explain what is wrong in the second example? I wish to avoid putting require() calls into the data, as that data could come from a server, and it seems weird to me to put a require() call in the data. Thanks.
有没有人可以帮助解释第二个例子中的错误？我希望避免将 require() 调用放入数据中，因为该数据可能来自服务器，而将 require() 调用放入数据中对我来说似乎很奇怪。谢谢。
EDIT: Per Edgar's advice below, since my images are part of the server and not the app, I can just put them into a folder in the /public folder, and not deal with require() at all.
编辑：根据下面埃德加的建议，由于我的图像是服务器的一部分而不是应用程序的一部分，我可以将它们放入 /public 文件夹中的文件夹中，而根本不处理 require() 。
回答by Edgar Quintero
Vue.js has a public folder. If you are using the Vue CLI, it should have created a public folder for you, you have to place any assets in this folder. Read more about it in the official Vue.js documentation.
Vue.js 有一个公共文件夹。如果您使用 Vue CLI，它应该为您创建了一个公共文件夹，您必须将任何资产放在此文件夹中。在官方Vue.js 文档中阅读更多相关信息。
Example folder structure:
示例文件夹结构：
/api
/public
/public/assets
/public/favicon.ico
/public/index.html
/src
index.js
app.json
etc...
等等...
In public you could put static assets such as images, fonts, favicon, robots.txt, sitemap.xml, etc.
在公共场合，您可以放置静态资产，例如图像、字体、网站图标、robots.txt、sitemap.xml 等。
Then to link to these static assets you'd use:
然后链接到您将使用的这些静态资产：
In your template HTML:
在您的模板 HTML 中：
<img src="/assets/some-image.svg" alt="Example" />
Or in your component JS:
或者在你的组件 JS 中：
array: [
{
iconUrl: '/assets/some-image-1.svg',
label: 'Some Label'
}
]
Otherwise you'd have to use requiresince it is being pulled from the srcfolder, as someone else has already said. But there probably wouldn't be a real reason to have them in there, so using /public/folder is recommended.
否则你必须使用，require因为它是从src文件夹中拉出来的，正如其他人已经说过的那样。但是可能没有真正的理由将它们放在那里，因此/public/建议使用文件夹。
回答by Steven Spungin
You need the requirebecause your resource is bundled on the client.
您需要 ，require因为您的资源捆绑在客户端上。
If you want you resource on the server, put it in the public folderinstead.
如果您希望在服务器上使用资源，请将其放入public folder。
Another issue we often see is when your component in the components folder. If so, try:
我们经常看到的另一个问题是当你的组件在 components 文件夹中时。如果是这样，请尝试：
default: require('../assets/p1.jpg')
回答by kaluogh
I think this question is a common problem that you can search for. The solution is to put the resource file in the static directory. The files in the asset folder will be processed by webpack, so there is no problem in html module ,buy there is a problem in the code module.
我认为这个问题是您可以搜索的常见问题。解决办法是把资源文件放在static目录下。asset文件夹下的文件会被webpack处理，所以html模块没有问题，买code模块有问题。
