Webp background image not showing in production

Question

In my project I wanted the background image from jpg to webp. In development I don't get any problems and the image shows up correctly, like in this image . But if I access the site from its link (hosted with AWS) the image is not loaded (the background is simply gray like on the other pages) in any browser (I tried Chrome and Edge and also from mobile).

Here is the code where the image is:

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

Here the github repo and the live site .

Answer 1

You just need to check your error in inspect of your browser and probably your file address is wrong or you forgot to upload that.