問題の説明プロジェクトを行う際、ページ上に画像を表示する必要があることがよくあります。一般的には、次のような方法があります。 方法 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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQL 8.0.20 インストール チュートリアル (画像とテキスト付き) (Windows 64 ビット)
>>: Win10 の組み込み Linux システムを使用して Spring Boot プロジェクトを開始する方法
目次1. Dockerをビルドする2. コンテナに入る3. 設定ファイルを変更する4. Kafkaを...
プロジェクトシナリオ:ページ表示には <ul> タグがあります。リストデータを動的に表示...
目次Vueカスタムディレクティブカスタムディレクティブフック機能出力関連属性アプリケーション例要約す...
Xhtml には、あまり使用されないが非常に便利なタグが多数あります。半分の労力で 2 倍の結果を達...
デフォルトでは、MyISAM テーブルはディスク上に .frm (テーブル構造ファイル)、.MYD ...
1. ファイアウォールをオフにし、Tomcatのインストールに必要なソフトウェアパッケージを/opt...
1. インストールディレクトリにzipパッケージを解凍します。まず、mysql-8.0.11-win...
Mongodb には db.serverStatus() コマンドがあり、これを使用して Mongo...
1. よく使われるHTMLタグの最適化HTML は Web 編集者にとって基本的なスキルであるべきで...
目次2. フィールドの連結2. MySQL関数の例をいくつか挙げてください。 2.1 シンボル処理2...
背景Alibaba Cloud RDS for MySQL(MySQL バージョン 5.7)データベ...
序文:サンドボックスといえば、私たちの頭には反射的に上の写真が思い浮かび、すぐに興味がわいてくるかも...
MySQL には、msi インストールと zip 解凍の 2 つのインストール方法があります。 zi...
本来、この第 7 章では、デザインにおけるレイヤーと空間テクニックについて深く議論するはずです。しか...
この記事は主にMysqlの複数データベースのバックアップのコード例を紹介します。この記事ではサンプル...