Vue ページでよりエレガントに画像を紹介する方法

Vue ページでよりエレガントに画像を紹介する方法

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue.js で画像パスを導入するいくつかの方法の詳細な説明
  • Vue の 3 つの画像インポート コード例
  • Vue ページに img 画像を導入する方法

<<:  CSS の子要素を親要素と高い一貫性を持たせる方法

>>:  HTMLタグと基本要素の学習のまとめ

推薦する

Ubuntu 20.04 ダブルピンイン入力方式のインストール手順

1. 中国語入力方法を設定する 2. ダブルスペルモードを設定する 3. 注意事項20.04 で S...

MySQLのExcelへのエクスポート方法の分析

この記事では、MySQL を使用してデータを Excel にエクスポートする方法について説明します。...

Ubuntu 19でdockerソースをインストールできない問題を共有する

主要な Web サイトと個人的な習慣に従って、Docker ソースを追加するには次の方法を使用します...

CSS calc() の数式に関する詳細な理解

数式 calc() は CSS の関数であり、主に数学演算に使用されます。 calc() を使用する...

Javascript で SessionStorage と LocalStorage を使用する方法

目次序文SessionStorage と LocalStorage の紹介SessionStorag...

Docker で Let's Encrypt から永久無料 SSL 証明書を取得する方法

1. 原因公式の cerbot は面倒すぎます。野生の成長よりもさらに悪い acme.sh の使用は...

MySQL パーティション テーブルの基本入門チュートリアル

序文最近のプロジェクトでは、大量のデータを保存する必要があり、このデータには有効期限があります。クエ...

JSはマップを使用してdouble配列を統合します

目次序文データのシミュレーション結合されたデータ合併のアイデアコードの表示と分析最初のステップステッ...

Nginx キャッシュ設定例

Web アプリケーションの開発とデバッグを行う際には、テストのためにブラウザのキャッシュをクリアした...

Dockerコンテナの中国語言語パックの設定の問題を解決する

Dockerでdocker search centosを使用する場合docker pull dock...

Vueスロットの使用の詳細

目次1. スロットを使用する理由1.1 スロット1.2 コンポーネントのスロット1.3 例2. この...

ネイティブJSで様々なモーションの複合モーションを実現

この記事では、ネイティブ JS で実装された複合モーションを紹介します。複合モーションとは、異なる属...

Mysql5.6.36 スクリプトのコンパイル、インストール、初期化のチュートリアル

概要この記事は、centos7.3 上で mysql5.3.6 を自動的にコンパイルしてインストール...

CSS スタイルを変更してグレーの Web ページ (色なし、明るい白黒のみ) を実現するいくつかの方法

通常、清明節、国哀悼日、大地震の日、影響力のある偉人の死去または命日には、ウェブマスターとして、故人...

手書きの Vue2.0 データハイジャックの例

目次1: webpackをビルドする2. データハイジャック3: まとめ1: webpackをビルド...