問題を見つける今日は、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データベースアカウントのパスワード暗号文ログイン機能を実装します。
効果効果図は以下のとおりです実装のアイデアDivは太陽の長方形の光と影を実現します前の疑似要素は、既...
この記事の例では、マウス切り替え画像を実現するためのjsの具体的なコードを参考までに共有しています。...
仕事で、これまで一度も書いたことのないケースに遭遇しました。午後の半分をその作業に費やし、ついに書き...
記事「MySQL の最適化: キャッシュの最適化」では、システムによってコンパイルされた変数値、また...
ブラウザはTIF形式の画像を表示しますコードをコピーコードは次のとおりです。 <html>...
簡単に言えば、ウェブサイト構築とは、「この人はどんな外見をしているのか」と「この人はどんな内面を持っ...
目次1. フロントエンドのリーディングプロセス: 2. プラグインの使用と初期化2.1 vue-ad...
1. Webデザイナーウォール 2. Veerleのブログ 3. チュートリアル9 4. UXブース...
この記事の警告事項は、ブラウザの互換性とはまったく関係ありません。主に、プロジェクトで遭遇したいくつ...
CUDA インストール cuda をダウンロードサポートされているcudaバージョンを表示するには...
時間フィールドを作成するときデフォルトのCURRENT_TIMESTAMPデータを挿入する際、このフ...
目次1. デカルト積現象2. 接続クエリの知識ポイントのまとめ1) 結合クエリとは何ですか? 2) ...
Ubuntu で nvidia グラフィック カード ドライバーをインストールします。同じ方法で ...
1. 物件リストコードをコピーコードは次のとおりです。色: #999999 テキスト色フォントファミ...
社内には以前からアイドル状態だった、構成の整ったサーバーがあったので、EXSI 6.0 を使って複数...