Vue プロジェクトを作成するときは、さまざまな画像を使用することになりますが、画像リソースをより有効に活用するにはどうすればよいでしょうか。ここでは私がよく使う方法についてお話します。 エラーのデモンストレーションおそらくあなたはコードにこれをよく書くでしょう <テンプレート> <img :src="src"> </テンプレート> <スクリプト> エクスポートデフォルト{ データ(){ 戻る { ソース: require('xxx.jpg') } } } </スクリプト> webpack では、require はリソースを自動的に処理しますが、これは問題ありません。ただし、これを vue のデータに配置すると、vue はデータをトラバースして src に応答性を追加します。ただし、ほとんどの場合、この src は応答性である必要がないため、パフォーマンスの無駄が発生します。 計算により上記のエラーを解決するには、次の解決策があります。 <テンプレート> <img :src="src"> </テンプレート> <スクリプト> const src = require('xxx.jpg') エクスポートデフォルト{ 計算:{ ソース(){ src を返す } } } </スクリプト> コンピューティング自体にキャッシュがあり、パフォーマンスの無駄を減らすことができます。 画像が変わらない場合は直接インポートする<テンプレート> <img :src="src"> </テンプレート> または <テンプレート> <div class="bg"></div> </テンプレート> <スタイル> .bg{ 背景:url("xxx.jpg") } </スタイル> 画像が変更されない場合は、変数を割り当てずに直接インポートできます。 同様に、クラス名を切り替えることで画像を動的に表示することもできます。これも優れています。 <テンプレート> <div :class="flag ? 'bg1':'bg2'"></div> </テンプレート> <スクリプト> エクスポートデフォルト{ データ(){ 戻る { フラグ: true } } } </スクリプト> <スタイル> .bg1{ 背景:url("xxx1.jpg") } .bg2{ 背景:url("xxx2.jpg") } </スタイル> CSS変数による画像の切り替えこれは私が今思いついたアイデアです。理論的には、CSS 変数には何でも保存できるので、画像のアドレスを保存できるのでしょうか? <テンプレート> <div class="bg"></div> </テンプレート> <スクリプト> エクスポートデフォルト{ マウントされた(){ // 最初の方法、画像アドレスまたはbase64 this.$el.style.setProperty('--bg',`url("http://xxx.com/1.jpg")`) // 2 番目のメソッド this.$el.style.setProperty('--bg',`url("${require('../assets/1.png')}")`) } } </スクリプト> <スタイル> .bg{ --bg:url('xxx.jpg'); 背景画像:--bg; } </スタイル> 私の個人的なテストは成功しました。この方法も利用可能で、計算よりも優れています。結局のところ、CSS 変数を操作する方がコストが低くなります。この方法で注意すべき点は、CSS 内の画像は通常 URL で記述されるため、文字列の URL (コンテンツ) を連結する必要があることです。 CSSによる描画これは実は余談です。画像によっては、CSS を使って描画できるものもあります。たとえば、下の画像の三角形です。Baidu で検索すると、さまざまな CSS 三角形ジェネレーターが見つかります。この種のグラフィックは、画像を導入するよりも CSS を使用して描画する方が適しています。 まとめると、vueのデータに画像を導入せず、cssを使用するようにしてください。 要約するVue ページでよりエレガントに画像を導入する方法に関するこの記事はこれで終わりです。Vue でよりエレガントに画像を導入する方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
1. 中国語入力方法を設定する 2. ダブルスペルモードを設定する 3. 注意事項20.04 で S...
この記事では、MySQL を使用してデータを Excel にエクスポートする方法について説明します。...
主要な Web サイトと個人的な習慣に従って、Docker ソースを追加するには次の方法を使用します...
数式 calc() は CSS の関数であり、主に数学演算に使用されます。 calc() を使用する...
目次序文SessionStorage と LocalStorage の紹介SessionStorag...
1. 原因公式の cerbot は面倒すぎます。野生の成長よりもさらに悪い acme.sh の使用は...
序文最近のプロジェクトでは、大量のデータを保存する必要があり、このデータには有効期限があります。クエ...
目次序文データのシミュレーション結合されたデータ合併のアイデアコードの表示と分析最初のステップステッ...
Web アプリケーションの開発とデバッグを行う際には、テストのためにブラウザのキャッシュをクリアした...
Dockerでdocker search centosを使用する場合docker pull dock...
目次1. スロットを使用する理由1.1 スロット1.2 コンポーネントのスロット1.3 例2. この...
この記事では、ネイティブ JS で実装された複合モーションを紹介します。複合モーションとは、異なる属...
概要この記事は、centos7.3 上で mysql5.3.6 を自動的にコンパイルしてインストール...
通常、清明節、国哀悼日、大地震の日、影響力のある偉人の死去または命日には、ウェブマスターとして、故人...
目次1: webpackをビルドする2. データハイジャック3: まとめ1: webpackをビルド...