vueはどのように写真をwebpに変換してフロントエンドに表示しますか

1.最初に画像をwebp形式に変換します

1.1 cmdを入力できるようになった後、ピップは枕をインストールします

pip install  Pillow --trusted-host mirrors.cloud.tencent.com

1.2 webp形式で保存すると、webp形式の写真を取得できます

...
from PIL import Image
img = Image.open('background1.jpeg').convert('RGB')
img.save('background3.jpeg.webp', 'webp')

2.フロントエンドディスプレイ：

2.1 Vue-cli は webp ファイルを読み取り、web ページ構成ファイルにファイルローダー項目を追加する必要があります

私の構成ファイルはビルドディレクトリの webpack.base.conf.js です

    rules: [  
    ......
      {
        test: /\.webp$/i,
        use:['file-loader']
      },
    ......
    ]

2.2 <img> タグは webp ファイルに src できないため、<div>+background-image を使用する必要があります

          <div id="imgMain1"
          :style="{ height: Height + 'px' }"
          style="width:100%;"></div>

  background-image: url('../../assets/background1jpeg.webp');
  background-repeat: no-repeat;
  background-size: 100% 100%

background-image の div については、要素の高さを指定する必要があることに注意してください。

これは背景画像であるため background-image、css のスタイルであり、スペースを占有しません. 要素の背景画像は、要素のサイズを埋めます.これはパッシブパディングです. 要素のサイズが指定されていない場合は、デフォルトで 0 になります。これは image である block 要素であり、
<img />スペースを占有する html のタグであり、image のサイズによって要素のサイズが決定され、アクティブなパディングに属しているため、 img で高さを指定する必要がない場合があります。そして幅。

したがって、外側の div ボックスの場合、高さを指定する必要があります。そうしないと、div はそれをサポートできず、高さが 0 の要素になります。

また、webp 画像は jpeg 形式よりも大きい場合があります。容量を節約するために、変換しない方がよいでしょう。

https://www.cnblogs.com/Pickcle/p/6247740.htmlを参照してください。

vueはどのように写真をwebpに変換してフロントエンドに表示しますか

おすすめ