How to insert vue.js pictures

Vue.js image insertion method: 1. Save the image path in data; 2. Directly access the image path in the function method; 3. Put the image in a json file, and then json files are referenced in the vue page.

[Related article recommendations: vue.js]

vue.js image insertion Method:

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 pictures in a json file, and then reference the json file in the vue page

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

Related free learning recommendations: javascript (video)

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