Sto cercando l'URL giusto per fare riferimento alle risorse statiche, come le immagini all'interno di Vue javascript.

Ad esempio, sto creando un marcatore volantino utilizzando un'immagine icona personalizzata e ho provato diversi URL, ma tutti restituiscono 404 (Not Found):

Main.vue:

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

Ho provato a mettere le immagini nella cartella delle risorse e nella cartella statica senza fortuna. Devo dire a vue di caricare quelle immagini in qualche modo?

Per chiunque cerchi di fare riferimento a immagini dal modello, è possibile fare riferimento alle immagini direttamente utilizzando "@"

Esempio:

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

In una configurazione regolare di Vue, /assetsnon viene servito.

Le immagini invece diventano src="data:image/png;base64,iVBORw0K...YII="stringhe.

Utilizzo da JavaScript: require()

Per ottenere le immagini dal codice JS, usa require('../assets.myImage.png'). Il percorso deve essere relativo (vedi sotto).

Quindi il tuo codice sarebbe:

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
    // ...
});

Usa percorso relativo

Ad esempio, supponi di avere la seguente struttura di cartelle:

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

Se vuoi fare riferimento all'immagine MyComponent.vue, il percorso potrebbe essere../assets/myImage.png

Ecco un CODICE DEMO che lo mostra in azione.

Sarebbe una soluzione migliore

Aggiunta di alcune buone pratiche e sicurezza alla risposta di @ acdcjunior, da usare al @posto di./

In JavaScript

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

Nel modello JSX

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

utilizzando @punti alla srcdirectory.

utilizzando ~punti alla radice del progetto, che semplifica l'accesso alle node_modulese altre risorse a livello di radice

Affinché Webpack restituisca i percorsi delle risorse corretti, è necessario utilizzare require ('./ relative / path / to / file.jpg'), che verrà elaborato dal file-loader e restituirà l'URL risolto.

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

Vedi modelli VueJS - Gestione di risorse statiche

Subito dopo aver aperto il tag script, aggiungilo import someImage from '../assets/someImage.png' e usalo per l'URL di un'iconaiconUrl: someImage

Che sistema stai usando? Webpack? Vue-loader?

Farò solo brainstorming qui ...

Poiché .png non è un file JavaScript, sarà necessario configurare Webpack per utilizzare il caricatore di file o il caricatore di URL per gestirli. Il progetto impalcato con vue-cli ha configurato anche questo per te.

Puoi dare un'occhiata webpack.conf.jsper vedere se è ben configurato come

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

/assets è per i file che sono gestiti da webpack durante il raggruppamento - per questo, devono essere referenziati da qualche parte nel codice javascript.

È possibile inserire altre risorse /static, il contenuto di questa cartella verrà copiato in un /distsecondo momento così com'è.

Ti consiglio di provare a cambiare:

iconUrl: './assets/img.png'

per

iconUrl: './dist/img.png'

Puoi leggere la documentazione ufficiale qui: https://vue-loader.vuejs.org/en/configurations/asset-url.html

Spero che ti aiuti!

Avere una struttura predefinita di cartelle generate da Vue CLI, ad esempio src/assetsè possibile posizionare la propria immagine lì e fare riferimento a questa dall'HTML come segue <img src="../src/assets/img/logo.png">(funziona automaticamente senza modifiche anche durante la distribuzione).

Sto usando il dattiloscritto con vue, ma è così che ho fatto

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

questo finalmente ha funzionato per me, l'immagine è passata come oggetto di scena:

<img :src="require(`../../assets/${image}.svg`)">

Certo che src="@/assets/images/x.jpgfunziona, ma il modo migliore è: src="~assets/images/x.jpg