Webp背景圖像未在生產中顯示

Question

在我的項目中，我想要從 jpg 到 webp 的背景圖像。 在開發中，我沒有遇到任何問題，並且圖像正確顯示，就像在這個圖像中一樣。 但是，如果我從其鏈接（由 AWS 托管）訪問該站點，則在任何瀏覽器（我嘗試過 Chrome 和 Edge 以及移動設備）中都不會加載圖像（背景只是像其他頁面上的灰色）。

這是圖像所在的代碼：

import styled from 'styled-components';
import backgroundImage from '../../assets/images/background.webp';

export const PageContainer = styled.div`
    height: 100%;
    background: url(${backgroundImage}) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-position-y: 60%;
`;

這里是github repo和 live site 。

Answer 1

您只需要在檢查瀏覽器時檢查您的錯誤，並且您的文件地址可能是錯誤的，或者您忘記上傳了。