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!