Quiero renderizar un svg diferente según el ancho de la pantalla del navegador. Encontré una solución que espera que use srcSet dentro de una etiqueta img. Sin embargo, no puedo hacer que funcione.
El objetivo debe ser renderizar SmallTalents en dispositivos móviles y BigTalents en tabletas+
Notas rápidas:
import React from "react"; import SmallTalents from "../../../assets/smallTalents.svg"; import BigTalents from "../../../assets/bigTalents.svg"; function Example() { return ( <section> <img srcSet={`${SmallTalents}, 200w ${BigTalents} 600w`} sizes="(max-width: 600px) 480px, 800px" src={SmallTalents} alt="talents" /> </section> ); } export default Example;Intenté esto, no funciona
<picture> <source media="(min-width: 300px)" srcset={SmallTalents} /> <source media="(min-width: 900px)" srcset={BigTalents} /> </picture> <img src={SmallTalents} alt="talents" className="my-5 md:hidden" /> <img src={BigTalents} alt="talents" className="my-5 hidden md:flex" />Puede usar el elemento de imagen en html para representar diferentes imágenes según el tamaño de la pantalla:
<picture> <source media="(min-width: 650px)" srcset="img_food.jpg"> <source media="(min-width: 465px)" srcset="img_car.jpg"> <img src="img_girl.jpg"> </picture>Creo que hay un pequeño error tipográfico en su propiedad srcSet, el 200w debe estar en el lado izquierdo de la coma. es decir srcSet={ ${PequeñosTalentos} 200w, ${GrandesTalentos} 600w }