webentwicklung-frage-antwort-db.com.de

Statische Image-Quelle in der Vue.js-Vorlage

Meine Vue-Komponente enthält einige Bilder. Ich möchte später faul laden, also muss ich zunächst die src der Bilder auf ein kleines Bild setzen.

<template>
        <div v-for="item in portfolioItems">
            <a href="#{{ item.id }}">
                <img
                    data-original="{{ item.img }}"
                    v-bind:src="/static/img/clear.gif"
                    class="lazy" alt="">
            </a>
        </div>
</template>

Gibt mir eine Reihe von Fehlern, wie:

[Vue warn]: Ungültiger Ausdruck. Generierte Funktion body: /scope.static/scope.img/scope.clear.gif vue.common.js: 1014 [Vue

[Vue warn]: Fehler beim Auswerten des Ausdrucks "/static/img/clear.gif": TypeError: Eigenschaft 'Aufruf' von undefined kann nicht gelesen werden (gefunden in Komponente:)

webpack.config.js: module.exports = { // ... bauen: { assetsPublicPath: '/', assetsSubDirectory: 'statisch' } }

javascriptwebpackvue.js
21
reggie

Wenn Sie einen String an das src-Attribut binden möchten, sollten Sie ihn in einfache Anführungszeichen setzen:

<img v-bind:src="'/static/img/clear.gif'">
<!-- or shorthand -->
<img :src="'/static/img/clear.gif'">

IMO Sie müssen keine Zeichenfolge binden, Sie können die einfache Methode verwenden:

<img src="/static/img/clear.gif">

Sehen Sie sich ein Beispiel für das Vorladen des Bildes an: http://codepen.io/pespantelis/pen/RWVZxL

28
Pantelis Peslis

Diese Lösung ist für Vue-2-Benutzer gedacht:

  1. In vue-2, wenn Sie Ihre Dateien nicht im static-Ordner ( relevante Informationen ) aufbewahren möchten, oder
  2. In vue-2 & vue-cli-3, wenn Sie Ihre Dateien nicht im public-Ordner behalten möchten (static-Ordner wird in public umbenannt)

Die einfache Lösung ist :)

<img src="@/assets/img/clear.gif" /> // just do this:
<img :src="require(`@/assets/img/clear.gif`)" // or do this:
<img :src="require(`@/assets/img/${imgURL}`)" // if pulling from: data() {return {imgURL: 'clear.gif'}}

Wenn Sie Ihre statischen Bilder im Ordner static/assets/img oder public/assets/img aufbewahren möchten, machen Sie einfach Folgendes:

<img src="./assets/img/clear.gif" />
9
Syed

@Pantelis Antwort hat mich irgendwie zu einer Lösung für ein ähnliches Missverständnis gelenkt. Bei einem Message Board-Projekt, an dem ich gerade arbeite, muss ein optionales Bild angezeigt werden. Ich hatte Anfälle, als ich versuchte, die src = imagefile dazu zu bringen, einen festen Pfad und einen variablen Dateinamenstring zu verketten, bis ich die skurrile Verwendung von "''" Anführungszeichen sah :-)

<template id="symp-tmpl">
  <div>
    <div v-for="item in items" style="clear: both;">
      <div v-if="(item.imagefile !== '[none]')">
        <img v-bind:src="'/storage/userimages/' + item.imagefile">
      </div>
      sub: <span>@{{ item.subject }}</span>
      <span v-if="(login == item.author)">[edit]</span>
      <br>@{{ item.author }}
      <br>msg: <span>@{{ item.message }}</span>
    </div>
  </div>
</template>
8
rickatech

So löse ich es:

      items: [
        { title: 'Dashboard', icon: require('@/assets/icons/sidebar/dashboard.svg') },
        { title: 'Projects',  icon: require('@/assets/icons/sidebar/projects.svg') },
        { title: 'Clients', icon: require('@/assets/icons/sidebar/clients.svg') },
      ],

Und zum Vorlagenteil:

<img :src="item.icon" />

Hier in Aktion sehen

3
roli roli

neue Variable deklarieren, dass der Wert den Pfad des Bildes enthält 

const imgLink = require('../../assets/your-image.png')

dann rufen Sie die Variable auf

export default {
    name: 'onepage',
    data(){
        return{
            img: imgLink,
        }
    }
}

binden Sie das auf HTML, dies ist das Beispiel: 

<a href="#"><img v-bind:src="img" alt="" class="logo"></a>

hoffe es wird helfen

0
Cevin Ways