Comment référencer des actifs statiques dans le javascript Vue

Question

Je cherche la bonne url pour référencer les actifs statiques, comme les images dans Vue javascript.

Par exemple, je suis en train de créer un marqueur de dépliant en utilisant une image d'icône personnalisée, et j'ai essayé plusieurs urls, mais elles retournent toutes un 404 (Not Found) :

Main.vue :

var icon = L.icon({
    iconUrl: './assets/img.png',
    iconSize:     [25, 25],
    iconAnchor:   [12, 12]
});

J'ai essayé de placer les images dans le dossier assets et dans le dossier static, sans succès. Dois-je indiquer à Vue de charger ces images d'une manière ou d'une autre ?

Answer 1

Pour ceux qui souhaitent référencer des images à partir d'un modèle, vous pouvez le faire directement en utilisant '@'.

Exemple :

<img src="@/assets/images/home.png"/>

Answer 2

Dans une configuration normale de Vue, /assets n'est pas servi.

Les images deviennent src="data:image/png;base64,iVBORw0K...YII=" à la place.

Utilisation à partir de JavaScript : require()

Pour obtenir les images à partir du code JS, utilisez require('../assets.myImage.png') . Le chemin doit être relatif (voir ci-dessous).

Donc votre code serait :

var icon = L.icon({
    iconUrl: require('./assets/img.png'),   // was iconUrl: './assets/img.png',
//  iconUrl: require('@/assets/img.png'), // use @ as alternative, depending on the path
    // ...
});

Utiliser un chemin relatif

Par exemple, disons que vous avez la structure de dossiers suivante :

- src
  +- assets
     - myImage.png
  +- components
     - MyComponent.vue

Si vous voulez faire référence à l'image dans MyComponent.vue le chemin devrait être ../assets/myImage.png

Voici a DEMO CODESANDBOX le montrant en action.

Answer 3

Pour que Webpack renvoie les chemins d'accès corrects aux ressources, vous devez utiliser require('./relative/path/to/file.jpg'), qui sera traité par file-loader et renverra l'URL résolue.

computed: {
  iconUrl () {
    return require('./assets/img.png')
    // The path could be '../assets/img.png', etc., which depends on where your vue file is
  }
}

Ver Modèles VueJS - Gestion des ressources statiques

Answer 4

Juste après l'ouverture de la balise script, ajoutez juste import someImage from '../assets/someImage.png' et l'utiliser pour une icône url iconUrl: someImage

Answer 5

Quel système utilisez-vous ? Webpack ? Vue-loader ?

Je ne fais que du remue-méninges ici...

Comme le fichier .png n'est pas un fichier JavaScript, vous devrez configurer Webpack pour qu'il utilise file-loader ou url-loader pour les gérer. Le projet échafaudé avec vue-cli a également configuré cela pour vous.

Vous pouvez jeter un coup d'œil à webpack.conf.js afin de voir si elle est bien configurée comme

...
    {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
...

/assets est pour les fichiers qui sont manipulés par webpack pendant l'empaquetage - pour cela, ils doivent être référencés quelque part dans votre code javascript.

D'autres actifs peuvent être mis en /static le contenu de ce dossier sera copié dans le dossier suivant /dist plus tard en l'état.

Je vous recommande d'essayer de changer :

iconUrl: './assets/img.png'

à

iconUrl: './dist/img.png'

Vous pouvez lire la documentation officielle ici : https://vue-loader.vuejs.org/en/configurations/asset-url.html

J'espère que cela vous aidera !