require/import キーワードを使用して v-for ループでローカル画像をインポートするいくつかの方法

require/import キーワードを使用して v-for ループでローカル画像をインポートするいくつかの方法

問題の説明

プロジェクトを行う際、ページ上に画像を表示する必要があることがよくあります。一般的には、次のような方法があります。

方法 1 (バックエンドが画像 URL を返す)

この方法では、バックエンドが画像の URL アドレスを返し、img タグの src 属性を imgUrl に直接バインドします。次のコード:

<div class="item" v-for="(item, index) in apiArr" :key="index">
    <!-- apiArr はバックエンドから返されるデータで、それぞれに画像の URL アドレスを格納する imgUrl 属性があります -->
    <img :src="item.imgUrl" alt="">
</div>

方法 2 (フロントエンドで require を使用する)

2 番目の方法は、フロントエンドに画像ファイルを保存し、バックエンドは画像の名前のみを返す (または画像データを返さない) ことです。コード例は次のとおりです。

コードが添付されています

<テンプレート>
  <div class="wrap">
    <div class="item" v-for="(item, index) in apiArr" :key="index">
      <div class="imgWrap">
        <!-- require は画像ファイルモジュールを導入します -->
        <img :src="require(`@/assets/img/${item.imgTitle}.png`)" alt="" />
        <!-- 最終的にはこのようになり、正常に表示できるようになります <img src="@/assets/img/first.png" alt=""> -->
      </div>
      <div class="infoWrap">
        <div><span class="bloder">ランク:</span> {{ item.title }}</div>
        <div><span class="bloder">スコア:</span> {{ item.score }}</div>
      </div>
    </div>
    
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  データ() {
    戻る {
      apiArr: [],
    };
  },
  マウント() {
    // apiArr はリクエストを送信したときにバックエンドから返されるデータであり、その中の imgTitle プロパティには画像の名前が格納されていると仮定します // require キーワードを通じてこれを導入すると、指定されたパスの下のファイルで対応する画像ファイルを自動的に検索してロードします this.apiArr = [
      {
        タイトル: 「チャンピオン」
        スコア: "98.8",
        imgTitle: "最初",
      },
      {
        タイトル: 「準優勝」、
        スコア: "97.9",
        imgTitle: "2番目",
      },
      {
        タイトル:「第3位」
        スコア: "96.2",
        imgTitle: 「3番目」、
      },
    ];
  },
};
</スクリプト>

効果図は以下のとおりです

プロジェクトファイル構造図

方法3(フロントエンドでインポートを使用する)

コードが添付されています

<テンプレート>
  <div class="wrap">
    <div class="item" v-for="(item, index) in apiArr" :key="index">
      <div class="imgWrap">
        <img :src="item.imgTitle" alt="" />
      </div>
      <div class="infoWrap">
        <div><span class="bloder">ランク:</span> {{ item.title }}</div>
        <div><span class="bloder">スコア:</span> {{ item.score }}</div>
      </div>
    </div>
  </div>
</テンプレート>

<スクリプト>
// インポート import first from "@/assets/img/first.png";
「@/assets/img/second.png」から second をインポートします。
'@/assets/img/third.png' から third をインポートします。
エクスポートデフォルト{
  データ() {
    戻る {
      apiArr: [
        {
          タイトル: 「チャンピオン」
          スコア: "98.8",
          imgTitle: first, // インポートした画像を使用する},
        {
          タイトル: 「準優勝」、
          スコア: "97.9",
          imgTitle: second, // インポートした画像を使用する},
        {
          タイトル:「第3位」
          スコア: "96.2",
          imgTitle: third, // インポートした画像を使用する},
      ]、
    };
  },
};
</スクリプト>

レンダリングとプロジェクト ファイルの構造図は上記と同じなので、ここでは詳細には触れません。

要約する

画像をインポートするには、ES6 の import メソッドまたは commonjs の require メソッドを使用できますが、個人的には、より柔軟性が高い require メソッドを使用することをお勧めします。

これで、v-for ループで require/import キーワードを使用してローカルイメージを導入する方法についての説明は終わりです。ローカルイメージの導入に関するより関連性の高い v-for コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue.js で画像パスを導入するいくつかの方法の詳細な説明
  • vueシリーズのrequireJsにvue-routerを導入する方法
  • Vueの画像はrequireを使って導入する必要がある

<<:  MySQL 8.0.20 インストール チュートリアル (画像とテキスト付き) (Windows 64 ビット)

>>:  Win10 の組み込み Linux システムを使用して Spring Boot プロジェクトを開始する方法

推薦する

MySQL 5.7 のユニオンオール使用法のブラックテクノロジーを 5 分で学ぶ

MySQL 5.6 での union all のパフォーマンスパート 1:MySQL 5.6.25 ...

Dockerスペースがいっぱいでコンテナに入れない場合の解決策

トラブル発生が突然で、業務も迫っていたため、現場のスクリーンショットを撮る時間がありませんでしたので...

クリックして展開し、全文を読む機能を実現する純粋なCSS

注記記事表示リストインターフェースを開発する場合、情報の基本的な概要を提供するために記事ヘッダーコン...

Flexレイアウトを使用してdiv内のサブ要素を垂直方向に中央揃えする例

1. Flex は Flexible Box の略で、「柔軟なレイアウト」を意味し、ボックス モデル...

Dockerでデータディレクトリを移行する方法

目次ディスク使用量の表示ディスク クリーンアップ (軽々しく使用しないでください)データの移行ディス...

MySQLクエリ構文の概要

序文:この記事では主に、MySQL の where、group by、order by、limit、...

DockerをインストールしてAlibaba Cloud Image Acceleratorを構成する方法

DockerのインストールDocker はオープンソースなので、Windows システムへのインスト...

HTML 内の input type="reset" タグが無効 (機能しない) である理由として考えられるもの。

<html:reset> タグを使用すると、リセット ボタンが無効になり、ボタンをクリッ...

mysqld_multi を使用して単一のマシンに複数のインスタンスをデプロイする方法に関する MySQL チュートリアル

目次1. MySQLのコンパイルとインストール: 2. 最初のマルチインスタンス3307を準備する3...

Vue で動的に追加されたルーティング ページの更新時に失敗する理由と解決策

目次問題の説明シナリオインターフェースリターンフロントエンドメニューの定義vuex のメソッド問題原...

MySQLのインデックス選択と最適化の詳細な説明

目次インデックスモデルB+ツリーインデックスの選択インデックスの最適化インデックスの選択性カバーイン...

Oracle10パーティションとMySQLパーティションの違いの詳細な説明

一般的に使用される Oracle10g パーティションは、範囲 (範囲パーティション)、リスト (リ...

きちんとした標準的なHTMLタグの書き方を学ぶ

優れた HTML コードは美しい Web サイトの基礎となります。私が CSS を教えるときは、まず...

Windows Server 2008 64ビット MySQL5.6 インストール不要版 設定方法図

1 公式ウェブサイトから MySQL 5.6 バージョンの圧縮パッケージmysql-5.6.36-w...

TypeScript をインストール、使用、自動コンパイルする方法に関するチュートリアル

1. TypeScriptの紹介前回の記事ではTypeScriptのインストール、使い方、自動コンパ...