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

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