Vue.js 2: Vue не может найти файлы из папки / assets (v-for)

Question

Я использую Vue-cli 3 с Webpack, и моя структура папок выглядит следующим образом:

/public
/src
   /assets
      p1.jpg
      p2.jpg
App.vue
main.js

Я читал в нескольких местах, что для того, чтобы Webpack знал, где находятся ваши / активы, вы должны использовать require (), если вы находитесь на земле Javascript.

Я определил, что этот код работает:

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

<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 (). Спасибо.

РЕДАКТИРОВАТЬ: согласно совету Эдгара ниже, поскольку мои изображения являются частью сервера, а не приложения, я могу просто поместить их в папку в папке / public и вообще не работать с require ().

Answer 1

Vue.js имеет общую папку. Если вы используете Vue CLI, он должен был создать для вас общую папку, вы должны поместить все ресурсы в эту папку. Подробнее об этом читайте в официальной документации Vue.js.

Пример структуры папок:

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

и т.д ...

Публично вы можете разместить статические ресурсы, такие как изображения, шрифты, favicon, robots.txt, sitemap.xml и т. Д.

Затем для ссылки на эти статические ресурсы вы будете использовать:

В вашем шаблоне HTML:

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

Или в вашем компоненте JS:

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

В противном случае вам придется использовать require, поскольку он извлекается из папки src, как уже сказал кто-то другой. Но, вероятно, не было бы реальной причины иметь их там, поэтому рекомендуется использовать папку /public/.

Answer 2

Я думаю, что этот вопрос является распространенной проблемой, которую вы можете искать. Решение состоит в том, чтобы поместить файл ресурса в статический каталог. Файлы в папке ресурсов будут обрабатываться веб-пакетом, поэтому в html-модуле проблем нет, а в модуле кода есть проблемы.

Answer 3

Вам нужен require, потому что ваш ресурс связан на клиенте.

Если вы хотите, чтобы ваш ресурс был на сервере, поместите его вместо public folder.

Другая проблема, с которой мы часто сталкиваемся, - это когда ваш компонент находится в папке компонентов. Если это так, попробуйте:

default: require('../assets/p1.jpg')