Heim > Web-Frontend > View.js > Hauptteil

So fügen Sie vue.js-Bilder ein

coldplay.xixi
Freigeben: 2020-11-17 15:28:36
Original
3975 Leute haben es durchsucht

So fügen Sie Bilder in vue.js ein: 1. Speichern Sie den Bildpfad in den Daten. 2. Greifen Sie direkt auf den Bildpfad in der Funktionsmethode zu. 3. Fügen Sie das Bild in eine JSON-Datei ein und referenzieren Sie es dann im JSON der Vue-Seite Datei.

So fügen Sie vue.js-Bilder ein

【Empfohlene verwandte Artikel: vue.js

vue.js Bildinsertionsmethode:

Method 1: Speichern Sie den Bildpfad in den Daten

imgList: [
          {
            openItem: '../static/icon/ic_police.png'
          },
          {
            openItem: '../static/icon/ic_prepay_confirm.png'
          },
          {
            openItem: '../static/icon/ic_checkout.png'
          },
          {
            openItem: '../static/icon/ic_lvye.png'
          },
          {
            openItem: '../static/icon/ic_invoice.png'
          },
          {
            openItem: '../static/icon/ic_bill.png'
          }
        ]
Nach dem Login kopieren

method 2: Funktion direkt zugreifen der Bildpfad in der Methode

let src = require('../../assets/homeImg/home_icon1.png');
Nach dem Login kopieren

Methode 3: Fügen Sie die Bilder in eine JSON-Datei ein und verweisen Sie dann auf die JSON-Datei auf der Vue-Seite

import imgs from "../../static/json/img.json"
export default {
data () {
return {
imgList: imgs.images
}
}
}
Nach dem Login kopieren

Verwandte kostenlose Lernempfehlungen: Javascript (Video)

Das obige ist der detaillierte Inhalt vonSo fügen Sie vue.js-Bilder ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!