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 を応援していただければ幸いです。

以下もご興味があるかもしれません: