Ich suche nach der richtigen URL, um auf statische Assets zu verweisen, z. B. Bilder in Vue-Javascript.

Zum Beispiel erstelle ich eine Broschürenmarkierung mit einem benutzerdefinierten Symbolbild und habe mehrere URLs ausprobiert, aber alle geben Folgendes zurück 404 (Not Found):

Main.vue:

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

Ich habe versucht, die Bilder ohne Glück in den Assets-Ordner und den statischen Ordner zu legen. Muss ich vue sagen, dass er diese Bilder irgendwie laden soll?

Für alle, die Bilder aus einer Vorlage referenzieren möchten, können Sie Bilder direkt mit '@' referenzieren.

Beispiel:

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

In einem regulären Vue-Setup /assetswird nicht bedient.

Die Bilder werden src="data:image/png;base64,iVBORw0K...YII="stattdessen zu Zeichenfolgen.

Verwenden aus JavaScript: require()

Verwenden Sie zum Abrufen der Bilder aus JS-Code require('../assets.myImage.png'). Der Pfad muss relativ sein (siehe unten).

Ihr Code wäre also:

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

Verwenden Sie den relativen Pfad

Angenommen, Sie haben die folgende Ordnerstruktur:

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

Wenn Sie auf das Bild verweisen möchten MyComponent.vue, sollte der Pfad so sein../assets/myImage.png

Hier ist eine DEMO CODESANDBOX, die sie in Aktion zeigt.

Damit Webpack die richtigen Asset-Pfade zurückgeben kann, müssen Sie require ('./ relative / path / to / file.jpg') verwenden, das vom File-Loader verarbeitet wird und die aufgelöste URL zurückgibt.

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

Siehe VueJS-Vorlagen - Umgang mit statischen Assets

Eine bessere Lösung wäre

Hinzufügen einiger bewährter Methoden und Sicherheit zur Antwort von @ acdcjunior, um sie @anstelle von zu verwenden./

In JavaScript

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

In der JSX-Vorlage

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

mit @Punkten auf das srcVerzeichnis.

Verwenden von ~Punkten zum Projektstamm, wodurch der Zugriff auf die node_modulesund andere Ressourcen auf Stammebene erleichtert wird

Fügen Sie direkt nach dem Öffnen des Skript-Tags import someImage from '../assets/someImage.png' ein Symbol hinzu und verwenden Sie es für eine Symbol-URLiconUrl: someImage

Welches System verwenden Sie? Webpack? Vue-Loader?

Ich werde hier nur ein Brainstorming durchführen ...

Da .png keine JavaScript-Datei ist, müssen Sie Webpack so konfigurieren, dass sie mit File-Loader oder URL-Loader verarbeitet werden. Das mit vue-cli gerüstete Projekt hat dies ebenfalls für Sie konfiguriert.

Sie können einen Blick darauf werfen, webpack.conf.jsum zu sehen, ob es gut konfiguriert ist

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

/assets ist für Dateien gedacht, die während des Bündelns vom Webpack verarbeitet werden - dafür müssen sie irgendwo in Ihrem Javascript-Code referenziert werden.

Andere Assets können eingefügt /staticwerden. Der Inhalt dieses Ordners wird /distspäter unverändert kopiert .

Ich empfehle Ihnen, zu versuchen, zu ändern:

iconUrl: './assets/img.png'

zu

iconUrl: './dist/img.png'

Sie können die offizielle Dokumentation hier lesen: https://vue-loader.vuejs.org/en/configurations/asset-url.html

Hoffe es hilft dir!

Mit einer Standardstruktur von Ordnern, die von Vue CLI generiert wurden, wie src/assetsSie Ihr Image dort platzieren und dies auch wie folgt aus HTML referenzieren können <img src="../src/assets/img/logo.png">(funktioniert automatisch ohne Änderungen bei der Bereitstellung).

Ich verwende Typoskript mit Vue, aber so habe ich es gemacht

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

Natürlich src="@/assets/images/x.jpgfunktioniert, aber der bessere Weg ist: src="~assets/images/x.jpg