Comment ajouter des images dans vue.js

La méthode d'ajout d'images dans vue.js est la suivante : placez d'abord les images à ajouter dans un fichier json ; puis référencez le fichier json dans la page vue, par exemple [importer des images depuis "../ . ./static/json/img.json"].

L'environnement d'exploitation de ce tutoriel : système Windows 7, version Vue2.9.6, ordinateur Dell G3.

La méthode d'ajout d'images dans vue.js est la suivante :

(Partage vidéo d'apprentissage : tutoriel vidéo php)

Méthode 1 : Enregistrez le chemin de l'image dans data

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'
          }
        ]

Méthode 2 : Accédez directement au chemin de l'image dans la méthode fonction

let src = require('../../assets/homeImg/home_icon1.png');

Méthode 3 : Mettez l'image dans un fichier json, puis utilisez-le dans vue Fichiers json de référence dans la page

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

Recommandations associées : Tutoriel vue.js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!