En mi proyecto quería la imagen de fondo de jpg a webp. En desarrollo no tengo ningún problema y la imagen se muestra correctamente, como en esta imagen . Pero si accedo al sitio desde su enlace (alojado con AWS) la imagen no se carga (el fondo es simplemente gris como en las otras páginas) en ningún navegador (probé Chrome y Edge y también desde el móvil).
Aquí está el código donde está la imagen:
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%; `;Solo necesita verificar su error en la inspección de su navegador y probablemente la dirección de su archivo sea incorrecta o se olvidó de cargarlo.