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 をよろしくお願いいたします。

以下もご興味があるかもしれません: