問題を見つける今日は、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、または *.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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: mysql スケジュールタスク (イベント イベント) の詳細な説明
>>: SSMは、mysqlデータベースアカウントのパスワード暗号文ログイン機能を実装します。
1. 準備例: 2 台のマシン: 192.168.219.146 (マスター)、192.168.21...
序文Oracle であれ MySQL であれ、新バージョンで導入された新機能は、一方では製品の機能性...
目次1. Vueリスナー配列2. vueが配列の変更を監視できない状況1. Vueリスナー配列Vue...
MySQL では通常、limit を使用してページ上のページング機能を完了しますが、データ量が大きな...
google.htmlインターフェースは図の通りですコードは図のとおりです: (比較的シンプルで、入...
初心者は、いくつかの HTML タグを理解することで HTML を学習できます。この入門書は、初心者...
目次1. 異なるリクエストパスに応じて異なるデータを返す方法を学びます。 2. 送信データ: データ...
かなり前に仮想マシンをインストールしましたが、ようやく Linux をインストールしました。マシンの...
序文ある日、突然 MySQL の次のキー ロックについて尋ねられ、私の即座の反応は次のようなものでし...
プロジェクトドキュメントディレクトリDiv+CSS 命名規則 - 4 - Div+css 命名規則 ...
1 メソッドは、データをサーバーに送信する方法を指定するプロパティです。 2 post と get ...
バージョン1.4.2公式ドキュメントドッカーハブ起動する環境変数SEATA_CONFIG_NAMEを...
目次場合コンテキスト切り替えのオーバーヘッド?要約するCPU は多くの場合、システム パフォーマンス...
序文:パーティショニングはテーブル設計パターンです。一般的に、テーブル パーティショニングとは、条件...
目次序文作成手順CentOSベースイメージを作成するコンテナを作成してカスタマイズするカスタムコンテ...