How to add pictures in vue.js

The method of adding images in vue.js is: first put the images to be added in a json file; then reference the json file in the vue page, such as [import imgs from "../ ../static/json/img.json"].

The operating environment of this tutorial: Windows 7 system, Vue2.9.6 version, Dell G3 computer.

The method of adding images in vue.js is as follows:

(Learning video sharing:php video tutorial)

Method 1 : Save the image path in 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' } ]

Method 2: Directly access the image path in the function method

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

Method 3: Put the image in a json file, and then use it in vue Reference json files in the page

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

Related recommendations:vue.js tutorial

The above is the detailed content of How to add pictures in vue.js. For more information, please follow other related articles on the PHP Chinese website!