ホームページ > ウェブフロントエンド > Vue.js > vue.jsで画像を追加する方法

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

王林
リリース: 2021-01-28 18:35:51
オリジナル
6662 人が閲覧しました

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

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

このチュートリアルの動作環境: 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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート