Vue.js 2:Vue 无法从/assets 文件夹中找到文件 (v-for) [英] Vue.js 2: Vue cannot find files from /assets folder (v-for)
问题描述
我在 Webpack 中使用 Vue-cli 3，我的文件夹结构如下所示:
/public/源/资产1.jpg.jpg应用程序主文件我在几个地方读到，为了让 Webpack 知道你的/assets 在哪里，如果你在 Javascript 领域，你应该使用 require().
我已确定此代码有效:
<div><ul><li v-for="照片中的照片" :key="photo.id"><img :src="photo.imageUrls.default"/><脚本>/* 为了让 webpack 在构建过程中解析 javascript 中的 URL，你需要 require() 函数 */导出默认{数据() {返回 {相片: [{编号:1，标题:'P1'，系列: ''，注:'',图片网址:{默认值:需要('./assets/p1.jpg')}},{编号:2，标题:'P2'，系列: ''，注:'',图片网址:{默认值:需要('./assets/p2.jpg')}}]}}}
但是，这行不通.我在控制台中看到一个错误:错误:找不到模块'./assets/p1.jpg'"
<div><ul><li v-for="照片中的照片" :key="photo.id"><img :src="imagePath(photo)"/><脚本>/* 为了让 webpack 在构建过程中解析 javascript 中的 URL，你需要 require() 函数 */导出默认{数据() {返回 {相片: [{编号:1，标题:'P1'，系列: ''，注:'',图片网址:{默认值:'./assets/p1.jpg'}},{编号:2，标题:'P2'，系列: ''，注:'',图片网址:{默认值:'./assets/p2.jpg'}}]}},方法: {图像路径(照片){返回要求(photo.imageUrls.default)；}}}
有没有人可以帮助解释第二个例子中的错误?我希望避免将 require() 调用放入数据中，因为该数据可能来自服务器，而将 require() 调用放入数据中对我来说似乎很奇怪.谢谢.
根据下面 Edgar 的建议，由于我的图像是服务器的一部分而不是应用程序的一部分，我可以将它们放入/public 文件夹中的文件夹中，而根本不处理 require().
Vue.js 有一个公共文件夹.如果您使用 Vue CLI，它应该为您创建了一个公共文件夹，您必须将任何资产放在此文件夹中.在官方 Vue.js 文档.
示例文件夹结构:
/api/上市/公共/资产/public/favicon.ico/public/index.html/源索引.js应用程序.json等等...
在公共场合，您可以放置静态资产，例如图像、字体、网站图标、robots.txt、sitemap.xml 等.
然后链接到您将使用的这些静态资产:
在您的模板 HTML 中:
或者在你的组件 JS 中:
数组:[{iconUrl: '/assets/some-image-1.svg',标签:'一些标签'}]否则你必须使用 require 因为它是从 src 文件夹中提取的，正如其他人已经说过的.但是可能没有真正的理由将它们放在那里，因此建议使用 /public/ 文件夹.
I am using Vue-cli 3 with Webpack, and my folder structure looks like this:
/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.
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'"
<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.
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.
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.
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.
Then to link to these static assets you'd use:
In your template HTML:
<img src="/assets/some-image.svg" alt="Example" />
Or in your component JS:
array: [
{
iconUrl: '/assets/some-image-1.svg',
label: 'Some Label'
}
]
Otherwise you'd have to use require since it is being pulled from the src folder, 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.
这篇关于Vue.js 2:Vue 无法从/assets 文件夹中找到文件 (v-for)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
