vue.jsの画像を挿入する方法

Vue.js 画像挿入方法: 1. 画像パスをデータに保存; 2. 関数メソッドで画像パスに直接アクセス; 3. 画像を json ファイルに置くと、json ファイルが参照されますvueページ内。

[関連記事の推奨: vue.js]

vue.js 画像挿入方法:

方法 1: データに画像パスを保存

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

方法 2: 関数で画像パスに直接アクセスメソッド

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

方法 3: Put json ファイル内の画像を指定し、vue ページで json ファイルを参照します。

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

関連する無料学習の推奨事項: javascript (ビデオ)

以上がvue.jsの画像を挿入する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。