So verweisen Sie auf statische Assets in vue javascript

90

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?

JBaczuk
quelle
Webpack? Das möchte normalerweise wissen, ob ein Bild enthalten ist, damit es in das Bundle aufgenommen wird. Andere Bündelungssysteme kümmern sich wahrscheinlich nicht darum, solange das Image auf Ihrem Server bereitgestellt wird
akatakritos

Antworten:

158

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"/>
azy777
quelle
2
... vorausgesetzt, Sie haben einen Ordner src / assets / images. Vue-Loader kopiert sofort Assets von src / .. / ..., um /../ .. zu erstellen, ODER fügt kleinere Bilder automatisch als data.image / png .. ein.
Johanness
9
hat bei mir nicht funktioniert: This dependency was not found:* @/assets/more-ico.svg. To install it, you can run: npm install --save @/assets/more-ico.svg...
Jakub Strebeyko
2
Hat auch bei mir nicht funktioniert, aber ..... ich habe dann gesehen, dass ich den falschen Dateinamen verwendet habe; p funktioniert perfekt!
Larzan
6
Es funktioniert, aber auf template, wenn Sie in CSS background-img Eigenschaft verwenden möchten, versuchen Sie etwas wie ../../assets/bg/login.svg, mit dem Bild in den Assets-Ordner
Calebeaires
5
Vielen Dank. Die Vue-Dokumentation zu statischen Assets ist unnötig ausführlich und vergräbt diesen primären Anwendungsfall fast am Ende der Seite in einem winzigen Punkt.
Our_Benefactors
65

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.

acdcjunior
quelle
2
Nachdem ich meine App mit vue-cli gerüstet hatte, funktionierte diese Technik für mich. Die Code-Sandbox war sehr hilfreich. Die Antwort ist nicht so klar wie die Code-Sandbox.
revdrjrr
require('./assets/img.png')funktionierte nicht für mich in den Optionen meiner Komponente, ich musste die ersetzen. mit einem @ : require('@/assets/img.png').
Michael
22

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

Yuci
quelle
21

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

Muhammad
quelle
Was ist, wenn es kein Bild ist, sondern eine Textdatei oder eine CSV? Und möchten Sie nur den Pfad / die URL erhalten?
Trainoasis
7

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

neberaa
quelle
Dies funktionierte gut für mich, als ich das '@' in den Import einbezog.
vab2048
2

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!

JP. Aulet
quelle
Ich bin nicht sicher, welches System ich verwende oder ob ich es manuell hinzufügen muss. Ich habe versucht, die ./dist URL und kein Glück
JBaczuk
0

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

Daniel Danielecki
quelle
0

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>
Michael
quelle
-3

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

Farzad.Kamali
quelle
2
Können Sie eine Erklärung geben?
JBaczuk