Vue.js 2：Vue无法从/ assets文件夹中找到文件（v-for） [英] Vue.js 2: Vue cannot find files from /assets folder (v-for)

问题描述

我在Webpack中使用Vue-cli 3，我的文件夹结构如下所示：

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

我在几个地方读过，为了让Webpack知道你的资产在哪里，如果你在Javascript土地上，你应该使用require（）。

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.

我已确定此代码有效：

<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>

但是，这不起作用。我在控制台中看到一个错误：
错误：找不到模块'./assets/p1.jpg'

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>

有没有人可以帮助解释第二个例子中的错误？我希望避免将require（）调用放入数据中，因为数据可能来自服务器，在数据中放置require（）调用似乎很奇怪。谢谢。

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.

编辑：根据Edgar的建议，由于我的图像是服务器而不是应用程序的一部分，我可以将它们放入/ public文件夹中的文件夹中，而不是处理require（）。

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有一个公共文件夹。如果您使用的是Vue CLI，它应该为您创建了一个公用文件夹，您必须将任何资源放在此文件夹中。请阅读官方 Vue.js文档。

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.

示例文件夹结构：

/api
/public
/public/assets
/public/favicon.ico
/public/index.html
/src
index.js
app.json

等...

在公开场合你可以放置静态资产，如图像，字体，图标，robots.txt，sitemap.xml等。

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:

在您的模板中HTML：

In your template HTML:

<img src="/assets/some-image.svg" alt="Example" />

或者在你的组件中JS：

Or in your component JS:

array: [
        {
          iconUrl: '/assets/some-image-1.svg',
          label: 'Some Label'
        }
      ]

否则你必须使用 require 因为它是从 src 文件夹中提取的，正如其他人已经说过的那样。但是可能没有真正的理由让它们在那里，所以建议使用 / public / 文件夹。

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屋！