web-dev-qa-db-fra.com

Vue.js 2: Vue ne trouve pas les fichiers du dossier / assets (v-for)

J'utilise Vue-cli 3 avec Webpack, et ma structure de dossiers ressemble à ceci:

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

J'ai lu à plusieurs endroits que pour que Webpack sache où sont vos/actifs, vous devez utiliser require () si vous êtes en Javascript.

J'ai déterminé que ce code fonctionne:

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

Mais cela ne fonctionne pas. Je vois une erreur dans la console: "Erreur: impossible de trouver le 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>

Y a-t-il quelqu'un qui peut aider à expliquer ce qui ne va pas dans le deuxième exemple? Je souhaite éviter de placer des appels require () dans les données, car ces données peuvent provenir d'un serveur, et il me semble étrange de mettre un appel require () dans les données. Merci.

EDIT: selon les conseils d'Edgar ci-dessous, puisque mes images font partie du serveur et non de l'application, je peux simplement les mettre dans un dossier dans le dossier/public, et ne pas traiter du tout avec require ().

javascriptvue.jswebpackvuejs2
5
Stephen

Vue.js possède un dossier public. Si vous utilisez la CLI Vue, elle devrait avoir créé un dossier public pour vous, vous devez placer tous les actifs dans ce dossier. En savoir plus à ce sujet dans la version officielle Vue. documentation js.

Exemple de structure de dossiers:

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

etc...

En public, vous pouvez mettre des actifs statiques tels que des images, des polices, des favicon, des robots.txt, sitemap.xml, etc.

Ensuite, pour lier à ces actifs statiques que vous utiliseriez:

Dans votre modèle HTML:

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

Ou dans votre composant JS:

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

Sinon, vous devrez utiliser require car il est extrait du dossier src, comme quelqu'un l'a déjà dit. Mais il n'y aurait probablement pas de raison réelle de les avoir là-dedans, donc en utilisant /public/ dossier est recommandé.

10
Edgar Quintero

Vous avez besoin de require car votre ressource est intégrée au client.

Si vous voulez que votre ressource sur le serveur, mettez-la dans le public folder au lieu.

Un autre problème que nous voyons souvent est lorsque votre composant se trouve dans le dossier des composants. Si oui, essayez:

default: require('../assets/p1.jpg')
3
Steven Spungin

Je pense que cette question est un problème courant que vous pouvez rechercher. La solution consiste à placer le fichier de ressources dans le répertoire statique. Les fichiers dans le dossier de ressources seront traités par webpack, donc il n'y a pas de problème dans le module html, il y a un problème dans le module de code.

1
kaluogh