Vue で動的に読み込まれたローカル画像を処理する方法

Vue で動的に読み込まれたローカル画像を処理する方法

問題を見つける

今日は、vue ファイルにローカル画像を導入する際に問題が発生したので、この記事を書きました。

通常、img タグは HTML では次のように記述されます。

<img src="../images/demo.png">

この書き込み方法では、相対パスの下にある画像のみを参照できます。絶対パスは使用できません。絶対パスを使用すると、そのようなリソースは webpack によって処理されずに直接コピーされます。

src が変数の場合、通常は動的バインディングのためにデータ内に変数 src を定義します。

<img :src="src">

//データ内の変数srcを定義する
データ() {
  戻る {
    ソース: '../images/demo.png'
   }
}

しかし、この時点では画像が読み込まれておらず、画像が表示されていないことがわかります。確認してみると、この画像のアドレスは ../images/demo.png となっていることがわかります。これは、v-bind でバインドされた相対パスが webpack のファイルローダーによって処理されず、単純なテキスト置換のみが実行されることを意味します。

ではどうすればいいのでしょうか?

回避策

1. 画像をbase64形式に変換する

<img src="data:image/png;base64,iVBYKIGloxxxxxxxxxxxxxxxxxx...">

これは、アイコンなど、通常サイズが 10 KB 未満の小さな画像に対して実行できます。

2. **import** を使用して画像を導入する

<img :src="src">

//import を使用して '../images/demo.png' から img をインポートします

//データ内の変数srcを定義する
データ() {
  戻る {
    出典:画像
   }
}


3. **require** を使用して動的にロードする

<img :src="src">

//データ内の変数srcを定義する
データ() {
  戻る {
    src: require('../images/demo.png')
  }
}


4. **publicPath** をインポートし、パスにスプライスして、インポートされたパスの動的な変更を実現します。

<img :src="publicPath + 'images/demo.jpg'" alt=""> // √
// コンパイル後:
<img src="/foo/images/demo.jpg" alt="">
<スクリプト>
エクスポートのデフォルト:{
    データ(){
        戻る {
          パブリックパス: process.env.BASE_URL、
        }
    },
}
</スクリプト>

vue.config.js で publicPath パスを設定します。

設定ファイル
モジュール.エクスポート = {
    パブリックパス:'/foo/',
    ...
}

結論は

静的リソースは 2 つの方法で処理できます。

  • JavaScript でインポートされるか、相対パスを介してテンプレート/CSS で参照されます。このような参照は webpack によって処理されます。
  • パブリック ディレクトリに配置するか、絶対パスで参照します。このようなリソースは、webpack によって処理されることなく直接コピーされます。

原理

相対パスからのインポート

JavaScript、CSS、または *.vue ファイルで相対パス (. で始まる必要があります) を使用して静的リソースを参照すると、そのリソースは webpack 依存関係グラフに含まれます。

コンパイルプロセス中に、<img src="...">、background: url(...)、CSS @import などのすべてのリソース URL がモジュール依存関係として解決されます。

絶対パスを使用する場合、パスは public フォルダー内のリソースを読み取ります。public フォルダーに配置された静的リソースは、webpack による特別な処理なしに、コンパイルされたディレクトリにコピーされるだけです。

アプリケーションが http://www.abc.com/ などのドメイン名のルート パスにデプロイされている場合、このインポート メソッドは正常に表示されます。ただし、アプリケーションがドメイン名のルートにデプロイされていない場合は、URL の publicPath プレフィックスを構成する必要があります。publicPath は、アプリケーション パッケージをデプロイするときのベース URL であり、vue.config.js で構成する必要があります。

拡張機能

vue ファイルローダーと url-loader について

ページに画像を導入したい場合(img の src と background の url を含む)。 webpack をベースに開発する場合、画像を導入するときにいくつかの問題が発生します。

その一つが参照パスの問題です。背景スタイルを例にとると、URL を使用して背景画像を導入します。webpack は最終的に各モジュールを 1 つのファイルにパッケージ化することは周知の事実であるため、このスタイルの URL パスは、元の CSS ファイルが配置されているパスではなく、エントリ HTML ページに対する相対パスになります。これにより、画像のインポートが失敗します。この問題は、ファイル ローダーを使用することで解決されます。ファイル ローダーは、プロジェクト内の URL 導入 (CSS に限定されません) を解析し、設定に従って画像を対応するパスにコピーし、設定に従ってパッケージ化されたファイルの参照パスを変更して正しいファイルを指すようにします。

また、画像が多い場合は、多くの http リクエストが送信され、ページのパフォーマンスが低下します。この問題は url-loader によって解決できます。 url-loader はインポートされた画像をエンコードし、dataURl を生成します。これは、画像データを文字列に変換することと同じです。次に、この文字列をファイルにパックし、最後にこのファイルをインポートするだけで画像にアクセスできます。もちろん、画像が大きい場合はエンコードによってパフォーマンスが低下します。そのため、url-loader は limit パラメータを提供します。limit バイトより小さいファイルは DataURl に変換され、limit より大きいファイルは file-loader を使用してコピーされます。

**url-loader と file-loader の関係は何ですか? **簡単に言うと、url-loader は file-loader をカプセル化します。 url-loader は file-loader に依存しません。つまり、url-loader を使用する場合は、url-loader のみをインストールすればよく、url-loader には file-loader が組み込まれているため、file-loader をインストールする必要はありません。上記の紹介から、url-loader が 2 つの状況で動作することがわかります。1. ファイル サイズが制限パラメータより小さい場合、url-loader はファイルを DataURL に変換します。2. ファイル サイズが制限より大きい場合、url-loader は処理のために file-loader を呼び出し、パラメータは file-loader に直接渡されます。したがって、url-loader をインストールするだけです。

オリジナルリンク: https://www.cnblogs.com/weizaiyes/p/7461967.html

写真紹介時の背景URLについて

上記の理論によれば、相対パスを使用して画像をインポートする場合、webpack はそれを必要とします。

背景: url('./iphonexs.png') 0 0 繰り返しなし;

そして実際に、ページの背景が次のように変わります。

背景: url(/resources/dist/images/iphonexs.a25bee7.png) 0 0 繰り返しなし;


これは、url-loader 設定に従って処理した結果です。

または、ダイナミック スタイルを使用します。

<div
   :style="{'background': 'url(' + require('./iphonexs.png') + ') 0 0 繰り返しなし'}">
</div>

参照

cli.vuejs.org/ja/ガイド/html

https://www.jb51.net/article/163170.htm

github.com/vuejs/vue-c…

要約する

これで、vue がローカル イメージを動的にロードする方法に関するこの記事は終了です。vue がローカル イメージを動的にロードする関連コンテンツの詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue でローカル JSON を動的に読み込む img src の画像パスを記述する方法
  • Vueがローカル画像を動的に読み込む問題を解決する
  • v-for を使用して vue でローカルの静的画像を読み込む方法

<<:  mysql スケジュールタスク (イベント イベント) の詳細な説明

>>:  SSMは、mysqlデータベースアカウントのパスワード暗号文ログイン機能を実装します。

推薦する

大きな太陽の天気アイコンを純粋な CSS で記述する方法の例

効果効果図は以下のとおりです実装のアイデアDivは太陽の長方形の光と影を実現します前の疑似要素は、既...

js はマウスによる画像の切り替えを実装します (タイマーなし)

この記事の例では、マウス切り替え画像を実現するためのjsの具体的なコードを参考までに共有しています。...

テキストエリアの残りの単語数を動的に取得する方法

仕事で、これまで一度も書いたことのないケースに遭遇しました。午後の半分をその作業に費やし、ついに書き...

MySQL 最適化接続最適化

記事「MySQL の最適化: キャッシュの最適化」では、システムによってコンパイルされた変数値、また...

ブラウザでTIF形式の画像を表示する方法

ブラウザはTIF形式の画像を表示しますコードをコピーコードは次のとおりです。 <html>...

DIV、テーブル、XHTML のウェブサイト構築の違いの分析と説明

簡単に言えば、ウェブサイト構築とは、「この人はどんな外見をしているのか」と「この人はどんな内面を持っ...

Vue エクスポート Excel 機能の全プロセス記録

目次1. フロントエンドのリーディングプロセス: 2. プラグインの使用と初期化2.1 vue-ad...

有名なブログの再設計例 28 件

1. Webデザイナーウォール 2. Veerleのブログ 3. チュートリアル9 4. UXブース...

HTML/CSS の基礎 - HTML コード記述におけるいくつかの注意事項 (必読)

この記事の警告事項は、ブラウザの互換性とはまったく関係ありません。主に、プロジェクトで遭遇したいくつ...

Ubuntu 20.04 CUDA & cuDNN のインストール方法 (グラフィカル チュートリアル)

CUDA インストール cuda をダウンロードサポートされているcudaバージョンを表示するには...

例によるMySql CURRENT_TIMESTAMP関数の分析

時間フィールドを作成するときデフォルトのCURRENT_TIMESTAMPデータを挿入する際、このフ...

MySQLシリーズ マルチテーブル結合クエリ92および99構文例詳細チュートリアル

目次1. デカルト積現象2. 接続クエリの知識ポイントのまとめ1) 結合クエリとは何ですか? 2) ...

Ubuntu で nvidia グラフィック ドライバーをインストールする (簡単なインストール方法)

Ubuntu で nvidia グラフィック カード ドライバーをインストールします。同じ方法で ...

DIV共通属性コレクション

1. 物件リストコードをコピーコードは次のとおりです。色: #999999 テキスト色フォントファミ...

VMware ESXi 6.0 および仮想マシンのインストール チュートリアルの展開 (画像とテキスト)

社内には以前からアイドル状態だった、構成の整ったサーバーがあったので、EXSI 6.0 を使って複数...