Есть два логотипа: 32px-logotype.png, 16px-logotype.png
Содержимое Header:
import { NavLink } from "react-router-dom"
const Header = (props) => {
return (
<div className={'header container'}>
<NavLink to={'/'} className={'logotype'}>
<img src={require('./32px-logotype.png')} alt={'logotype'}/>
</NavLink>
</div>
)
}
export default Header;
Как мне при разрешение меньше 768px в ширине вывести другую картинку
<img src={require('./16px-logotype.png')} alt={'logotype'}/>
Грузить сразу две картинки 16 и 32 и потом в css прятать в зависимости от media - так себе вариант, зачем мне грузить картинку на 32 если я сижу с телефона