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

Par exemple, je crée un marqueur de dépliant en utilisant une image d'icône personnalisée et j'ai essayé plusieurs URL, mais elles renvoient 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 mettre les images dans le dossier des actifs et le dossier statique sans succès. Dois-je dire à vue de charger ces images d'une manière ou d'une autre?

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

Exemple:

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

Dans une configuration standard de Vue, /assetsn'est pas servi.

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

Utilisation depuis 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 le chemin relatif

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

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

Si vous souhaitez référencer l'image dans MyComponent.vue, le chemin doit être../assets/myImage.png

Voici un CODESANDBOX DEMO le montrant en action.

Pour que Webpack renvoie les chemins d'accès corrects, vous devez utiliser require ('./ relative / path / to / file.jpg'), qui sera traité par le chargeur de fichiers et retournera 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
  }
}

Voir les modèles VueJS - Gestion des actifs statiques

Une meilleure solution serait

Ajout de bonnes pratiques et de sécurité à la réponse de @ acdcjunior, à utiliser à la @place de./

En JavaScript

require("@/assets/images/user-img-placeholder.png")

Dans le modèle JSX

<img src="@/assets/images/user-img-placeholder.png"/>

en utilisant des @points vers le srcrépertoire.

en utilisant des ~points vers la racine du projet, ce qui facilite l'accès aux node_modulesressources de niveau racine et à d'autres

Juste après l'ouverture de la balise de script, ajoutez-la import someImage from '../assets/someImage.png' et utilisez-la pour une URL d'icôneiconUrl: someImage

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

Je vais juste réfléchir ici ...

Comme .png n'est pas un fichier JavaScript, vous devrez configurer Webpack pour utiliser le chargeur de fichiers ou le chargeur d'url pour les gérer. Le projet échafaudé avec vue-cli a également configuré cela pour vous.

Vous pouvez jeter un oeil à webpack.conf.jspour voir s'il est bien configuré 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 gérés par webpack pendant le regroupement - pour cela, ils doivent être référencés quelque part dans votre code javascript.

D'autres ressources peuvent être insérées /static, le contenu de ce dossier sera copié /distultérieurement tel quel.

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!

Avoir une structure par défaut de dossiers générés par Vue CLI telle que src/assetsvous pouvez y placer votre image et la référencer à partir du HTML comme suit <img src="../src/assets/img/logo.png">(fonctionne automatiquement sans aucune modification lors du déploiement).

J'utilise dactylographié avec vue, mais c'est ainsi que j'ai procédé

<template><div><img :src="MyImage" /></div></template>
<script lang="ts">
    import { Vue } from 'vue-property-decorator';
    export default class MyPage extends Vue {
            MyImage = "../assets/images/myImage.png";
        }
</script>

Bien sûr, cela src="@/assets/images/x.jpgfonctionne, mais le meilleur moyen est: src="~assets/images/x.jpg