Vue の img の src 画像アドレスの動的スプライシングの問題について

Vue の img の src 画像アドレスの動的スプライシングの問題について

Vue での img の動的スプライシングを見てみましょう。src 画像アドレス、具体的な内容は次のとおりです。

使用シナリオ: バックエンドから返された画像タグに従ってローカル画像リソースを一致させます。例: バックエンドから返された k1 タグに従って、フロントエンドは画像リソース パス asset/images/inventory/k1.png を生成します。

<テンプレート>
    <div class="fl">
          <img :src="getImgUrl(gatherInfo.img1)" alt="">
          <img :src="getImgUrl(gatherInfo.img2)" alt="">
          <img :src="getImgUrl(gatherInfo.img3)" alt="">
     </div>
</テンプレート>
データ(){
    戻る {
      情報を収集:
        タイトル: 「在庫概要情報」
        画像1: 'k1',
        画像2: 'k2',
        画像3: 'k3',
      },
    }
}

方法論

//画像アドレスを取得する getImgUrl (img) {
      return require("@/assets/images/inventory/" + img+ ".png");
    },

これで、Vue の img の動的スプライシングに関するこの記事は終了です: src 画像アドレス。より関連性の高い vue img 動的スプライシング コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue レンダリング関数は img の src パス操作を動的に読み込みます
  • vue を使用して変数を介して URL を動的に連結する
  • vue src パスの動的スプライシングに関する経験

<<:  Nacos で MySQL8 を設定する方法

>>:  Docker に Tomcat をインストールし、Springboot プロジェクトの WAR パッケージをデプロイする方法

推薦する

Docker コンテナで DockerFile を使用して複数の Tomcat サービスをデプロイする手順

1. [admin@JD ~]$ cd opt #ルートディレクトリにoptと入力2. [admin...

Vue印刷機能を実装する2つの方法の概要

方法1: npm経由でプラグインをインストールする1. npm install vue-print-...

VMware 仮想マシンの 3 つのネットワーク方式と原則 (概要)

1. ブリッジ: デフォルトでは VMnet0 が使用されます1. 原則:ブリッジは、それぞれ 2...

JSタイマーを使用して要素を移動する

JS タイマーを使用して、要素に移動する効果のあるメソッドを作成します。実装のアイデアは、まず要素の...

MySQL接続がハングする理由の詳細な説明

目次1. 背景建築問題現象2. 分析プロセス接続プール不安に陥る雲を晴らして光を見よう3. 解決策I...

VUE でタブページを切り替える 4 つの方法

目次1. 静的実装方法: 2. 第2のシミュレーション動的方法3. 3番目の動的データ方式4. 動的...

Vue における v-model を使用したクロスコンポーネントバインディングの基本的な実装方法

みなさんこんにちは。今日はv-modelを使って親子コンポーネントのバインディング効果を実現する方法...

MySQL 5.7 でルートパスワードを忘れた後に変更する方法の詳細なチュートリアル

序文長い間、MySQL のアプリケーションおよび学習環境は MySQL 5.6 以前のバージョンであ...

一般的な JavaScript メモリ エラーと解決策

目次1. タイマー監視2. イベント監視3.オブザーバー4. ウィンドウオブジェクト5. DOM参照...

GoogleとFacebookがDockerを使わない理由

この記事を書いた理由は、修正した分散 PyTorch プログラムを Facebook のクラスター上...

問題におけるJS演算子の調査

問題は、誰もが「メモリ リーク」について知っていることです。一般的なシナリオはいくつかあります。クロ...

MySQLログシステムの使い方に関する簡単なチュートリアル

目次序文1. エラーログ2. バイナリログ1. バイナリログを有効にする2. バイナリログ形式3. ...

JavaScriptの信頼性の低い未定義

undefined JavaScript では、値が undefined かどうかを判断したい場合は...

MySQL データ定義言語 DDL の基本ステートメント

MySQL DDL ステートメントDDL、DMLとは何ですか。 DDL はデータ定義言語であり、CR...

Docker共通コマンドの詳しい解説 Study03

目次1. ヘルプコマンド2. ミラーコマンド3. コンテナコマンド1. ヘルプコマンド1. 現在のD...