Wie konvertiert vue Bilder in Webp und zeigt sie im Frontend an?

1. Konvertieren Sie zuerst das Bild in das Webp-Format

1.1 Nachdem Sie cmd eingeben können, installiert Pip Pillow

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

1.2 im Webp-Format speichern, können Sie Bilder im Webp-Format erhalten

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

2. Frontend-Anzeige:

2.1 Vue-cli liest Webp-Dateien und muss ein Dateiladeelement in der Konfigurationsdatei der Webseite hinzufügen

Meine Konfigurationsdatei ist webpack.base.conf.js im Build-Verzeichnis

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

2.2 <img>-Tag kann nicht in Webp-Datei src, muss <div>+Hintergrundbild verwenden

          <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%

Zu beachten ist, dass für das div des Hintergrundbilds die Höhe des Elements angegeben werden sollte

Da  background-imagees sich um ein Hintergrundbild handelt, ist es ein CSS-Stil und nimmt keinen Platz ein.Das Hintergrundbild des Elements füllt die Größe des Elements aus, was eine passive Auffüllung ist.Wenn die Elementgröße nicht angegeben ist, ist sie standardmäßig 0; Es ist ein Blockelement, das ein Bild ist
<img />. Es ist ein HTML-Tag, das Platz einnimmt, und die Größe des Bildes bestimmt die Größe des Elements, das zum aktiven Auffüllen gehört, daher muss img manchmal die Höhe nicht angeben und Breite.

Daher muss für die äußere Div-Box die Höhe angegeben werden, sonst kann das Div sie nicht unterstützen und wird zu einem Element mit einer Höhe von 0

Außerdem ist das Webp-Bild manchmal größer als das JPEG-Format, es ist besser, es nicht zu konvertieren, um weniger Platz zu beanspruchen

Siehe https://www.cnblogs.com/Pickcle/p/6247740.html