Vue ページに img 画像を導入する方法

Vue ページに img 画像を導入する方法

HTMLを学ぶとき、画像タグ<img>は画像を導入します

<img src="../assets/images/avatar.png" width="100%">

しかし、これには 2 つの欠点があります。

  • インポートには絶対パスが使用されるため、次の図のディレクトリを移動した場合は、srcのパスを変更する必要があります。
  • この画像が同じページ上の複数の場所で使用されている場合、複数回インポートする必要があり、画像ディレクトリが移動されているため、多くの場所で src パスを変更する必要があります。

何をするか?動的パスインポートとrequireを使用する

まず、この2人の兄弟について話しましょう。ES6以前は、JSには独自のモジュール構文がありませんでした。この恥ずかしさを解決するために、require.jsが作成されました。ES6がリリースされた後、JSはimportの概念を導入しました。

インポートを使用してインポート

インポート後、データに登録する必要があります。登録しないと表示されません。

<スクリプト>
'@/assets/images/cityOfVitality/lf1.png' から lf1 をインポートします。
'@/assets/images/cityOfVitality/lf2.png' から lf2 をインポートします。
'@/assets/images/cityOfVitality/lf3.png' から lf3 をインポートします。
'@/assets/images/cityOfVitality/lf4.png' から lf4 をインポートします
'@/assets/images/cityOfVitality/lf5.png' から lf5 をインポートします
'@/assets/images/cityOfVitality/lf6.png' から lf6 をインポートします
'@/assets/images/cityOfVitality/lf7.png' から lf7 をインポートします
'@/assets/images/cityOfVitality/icon_top1.png' から top1 をインポートします。
'./mixins' からミックスインをインポートします
エクスポートデフォルト{
  名前: 'LeftPiece'、
  ミックスイン: [ミックスイン],
  データ () {
    戻る {
      lf1、
      lf2、
      lf3、
      lf4、
      lf5、
      lf6、
      lf7、
      トップ1
    }
  }
}
</スクリプト>

require を使用してインポートする

<スクリプト>
'@/assets/images/cityOfVitality/icon_top1.png' から top1 をインポートします。
'./mixins' からミックスインをインポートします
エクスポートデフォルト{
  名前: 'RightPiecr',
  ミックスイン: [ミックスイン],
  データ () {
    戻る {
      rt1: require('@/assets/images/cityOfVitality/rt1.png'),
      rt2: require('@/assets/images/cityOfVitality/rt2.png'),
      rt3: require('@/assets/images/cityOfVitality/rt3.png'),
      rt4: require('@/assets/images/cityOfVitality/rt4.png'),
      rt5: require('@/assets/images/cityOfVitality/rt5.png'),
      rt6: require('@/assets/images/cityOfVitality/rt6.png'),
      トップ1
    }
  }
}
</スクリプト>

これで、img 画像を Vue ページに導入する方法に関するこの記事は終了です。img 画像を Vue に導入する方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue.js で画像パスを導入するいくつかの方法の詳細な説明
  • Vue の 3 つの画像インポート コード例
  • Vue ページでよりエレガントに画像を紹介する方法

<<:  HTML テーブル マークアップ チュートリアル (39): ヘッダーの明るい境界線の色属性 BORDERCOLORLIGHT

>>:  MySQL トランザクション自動コミット自動コミット操作

推薦する

ブラウザのキャッシュを防ぐために、js または css の後に ?v= バージョン番号を追加します。

コードをコピーコードは次のとおりです。 <span style="font-size...

優れたグラフィックデザイナーが習得すべき7つのスキル

1》ウェブデザインが得意であること2》Webページのデザイン方法を知る3》計画する4. SEOを理解...

Mysql SQL ステートメントのコメント

MySQL SQL ステートメントにコメントを追加できます。MySQL SQL ステートメントのコメ...

JavaScript の onblur および onfocus イベントの詳細な説明

HTML ページでは、ボタンやテキスト ボックスなどの視覚要素にフォーカスを設定したり、フォーカスを...

Ubuntu 18.04 向け VMware Tools のインストールと構成のチュートリアル

この記事では、Ubuntu 18.04でのVMware Toolsのインストールと設定について記録し...

ティックアニメーション効果を作成するための svg+css または js

以前、上司からログイン後にチェックマークを表示できるプログラムを作るように言われたのですが、Baid...

Linux の wget コマンドの詳細な紹介

目次まずwgetをインストールするヘルプマニュアルを見る1. wgetを使用して単一のファイルをダウ...

Tik Tok サブスクリプション ボタンのアニメーション効果を実現する CSS

少し前にTik Tokを見ていて、フォローするときのボタンアニメーションがとても美しいと思ったのと、...

JavaScriptにおけるこれの深い理解

Jsでのこれの深い理解JavaScriptスコープはstatic scopeスコープですが、 Jsの...

Win7 での Mysql 5.7.17 winx64 インストール チュートリアル

ソフトウェア バージョンとプラットフォーム: MySQL-5.7.17-winx64、win7 Ho...

ウェブページで CSS スタイルを適用するさまざまな形式の概要

1. インライン スタイル (<body></body> 内に配置されます)...

Vue+SSMは画像アップロードのプレビュー効果を実現します

現在の要件は、ファイルのアップロード ボタンがあることです。ボタンをクリックすると、アップロードする...

Linux DHCPサービスの詳細な説明

目次1. DHCP サービス (動的ホスト構成プロトコル) 1. 背景2. 概要3. 利点4.DHC...

要素UIポップアップコンポーネントをカプセル化する手順

el-dialogをコンポーネントとしてカプセル化するelement-ui を使用する場合、ポップア...

Reactでコンポーネントを作成する方法

目次序文コンポーネントの紹介クラスコンポーネントの作成状態についてレンダリングについて関数コンポーネ...