vue.jsで画像を追加する方法

vue.js に画像を追加する方法は、まず追加する画像を json ファイルに配置し、次に [import imgs from "../ . ./static/json/img.json"]。

このチュートリアルの動作環境: Windows 7 システム、Vue2.9.6 バージョン、Dell G3 コンピューター。

vue.js に画像を追加する方法は次のとおりです。

(学習ビデオ共有: php ビデオ チュートリアル )

方法 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: 画像を json ファイルに配置し、 vue で使用する ページ内の参照 json ファイル

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

関連する推奨事項:vue.js チュートリアル

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