web-dev-qa-db-fra.com

Comment référencer des actifs statiques dans vue javascript

Je recherche l'URL appropriée pour référencer les ressources statiques, telles que les images au sein de Vue javascript.

Par exemple, je crée un marqueur de brochure à l'aide d'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 assets et le dossier static sans succès. Dois-je dire à vue de charger ces images d'une manière ou d'une autre?

javascriptvue.jsleaflet
26
JBaczuk

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

Exemple:

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

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

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


Utilisation depuis JavaScript: require()

Pour obtenir les images à partir de 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',
    // ...
});


Utiliser le chemin relatif

Par exemple, supposons que vous ayez la structure de dossiers suivante:

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

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


Voici un DEMO CODESANDBOX le montrant en action.

31
acdcjunior

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

Voir Modèles VueJS - Gestion des actifs statiques

12
Yuci

Immédiatement après l'ouverture de la balise de script, ajoutez simplement import someImage from '../assets/someImage.png' et utilisez-la pour obtenir une URL d'icône iconUrl: someImage

4
neberaa

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

Je vais seulement faire un brainstorming ici ...

Comme .png n'est pas un fichier JavaScript, vous devrez configurer Webpack pour qu'il utilise le chargeur de fichiers ou le chargeur d'URL pour le gérer. Le projet échafaudé avec vue-cli l'a également configuré pour vous.

Vous pouvez jeter un oeil à webpack.conf.js afin de 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 destiné aux fichiers gérés par Webpack lors de la création du package. Pour cela, ils doivent être référencés quelque part dans votre code javascript.

D'autres ressources peuvent être placées dans /static, le contenu de ce dossier sera copié dans /dist ultérieurement.

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

0
JP. Aulet