Quería mostrar una imagen diferente para una resolución de 800 px y otra diferente para una resolución superior a 800 px. ¿Cómo puedo hacer eso?
Estoy agregando el código que he escrito. (Es solo para agregar una imagen en la página). Este es el código de mi imagen principal significa para todas las resoluciones.
<img src={alexagif} style={{ minWidth: "100%" }} />Lo que estás buscando son imágenes receptivas .
Por ejemplo, de MDN:
<img srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w" sizes="(max-width: 600px) 480px, 800px" src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">En el ejemplo, la primera línea sería la versión más pequeña de su imagen. El segundo es definir la imagen más grande que se debe representar, y "tamaños" es donde define el punto de ruptura del ancho del documento para que las imágenes cambien. La línea final es su imagen original/fuente alternativa
Otra forma de manejar esto sería intercambiando imágenes de fondo usando consultas @media en su CSS/hojas de estilo.
Puede usar la etiqueta <picture> de la siguiente manera:
<picture> <!--source for screens larger than 800px--> <source media="(min-width:800px)" srcset="https://images.unsplash.com/photo-1659447055750-4a85ffdf119e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY2MDQ1NjI3NQ&ixlib=rb-1.2.1&q=80&w=1080"> <!--source for default screens (smaller than 800px) --> <img src="https://images.unsplash.com/photo-1660337157394-7528d18332a9?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY2MDQ1NjIyMA&ixlib=rb-1.2.1&q=80&w=1080"> </picture>