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 トランザクション自動コミット自動コミット操作

推薦する

バッチファイルを処理するLinuxの1行コマンドの詳細な説明

序文最良の方法は、あなたが思いつく最も速い方法ではないかもしれません。職場で一時的に使用するスクリプ...

MySQL パーティションテーブルの制限と制約の詳細な説明

ビルドを無効にするパーティション式では、次の構成はサポートされません。ストアドプロシージャ、ストアド...

ウェブレスポンシブレイアウトにおけるiframe適応の方法

問題<br />レスポンシブ レイアウトでは、iframe 要素に注意する必要があります...

CSSの2つの特別な値は、カスケードの継承と初期メソッドを制御するために使用されます。

カスケードを制御するために CSS の任意のプロパティに割り当てることができる特別な値が 2 つあり...

MySQL メタデータで Hive テーブル作成ステートメントのコメント スクリプトを生成する方法

序文この記事は主にMySQLメタデータ生成Hiveテーブル作成ステートメントコメントスクリプトに関す...

CentOS7 ファイアウォール操作コマンドの完全なリスト

目次インストール: 1. ファイアウォールの基本的な使い方2. ファイアウォールd-cmdを設定する...

要素ツリーコントロールは、ドロップダウンメニューとアイコンを統合します(ツリー+ドロップダウン+入力)

目次要件:実装手順:この記事では主に以下について説明します: カスタムツリーコントロール<el...

https暗号化アクセス用にnginxを設定するための詳細なチュートリアル

環境: 1 CentOS Linux リリース 7.5.1804 (コア)ファイアウォールと sel...

CSS で中空効果を実装するサンプルコード

効果原理主にCSSグラデーションを使用して、切り取りを必要としない背景のくり抜きを実現します。クーポ...

CSS のサイズと幅と高さのブラウザ解釈の違いに対する解決策

まずは例を見てみましょうコードをコピーコードは次のとおりです。 <!DOCTYPE html ...

ウェブサイトのデザインを改善するための役立つ提案を提供します

<br />ウェブサイトを科学的にデザインする: アイトラッキング研究から学ぶ 23 の...

さまざまなターミナルで Mac が SSH 経由でリモート サーバーに接続する方法の説明

Macはシェル(ターミナル)SSHを使用してリモートサーバーに接続します前提条件: 接続する必要があ...

PC/Pad/Phoneデバイスに自動的に適応するCSSウェブページレスポンシブレイアウト

序文最近は、PC、iPad、携帯電話、スマートウォッチ、スマートテレビなど、さまざまなデバイスが存在...

Vue は Websocket カスタマー サービス チャット機能を実装します

この記事では主に基本的なチャットの実装方法を紹介します。今後は絵文字や写真のアップロードなどの機能も...

JavaScriptを使って動的にテーブルを生成するケースの詳しい説明

目次序文実装のアイデア実装コード成果を達成する序文これは、テーブルを動的に追加する例です。[追加] ...