Блог

Главная - Вопросы по программированию - Реагирует на соотношение пикселей — устанавливает 2x 3x изображения для устройств retina

Реагирует на соотношение пикселей — устанавливает 2x 3x изображения для устройств retina

#reactjs #retina-display

#reactjs #retina-дисплей

Вопрос:

Я создаю приложение react. Я хочу, чтобы браузер отправлял изображение (в два раза больше по разрешению) на устройства retina.

Я пытаюсь с 2x. Я пытаюсь по-разному:

Импортируется png. {retina} — это URL-адрес изображения, увеличенного в два раза. {логотип} — изображение нормального размера.

Я попытался реализовать это таким образом:

 <picture>
<source srcset={`${retina} 2x, ${logo} 1x`} />
<img src={logo} alt="Flowers" />
</picture>

также таким образом:

 <img srcset={`
${ratina} 2x,
${Logo} 1x,
`}
src={Logo}
></img>

и таким образом:

 <picture>
<img src={logo} srcset={`${retina} 2x`} />
</picture>

и таким образом:

 <img src={logo} srcset={`${retina} 2x`} />

В целях тестирования я придал изображению retina png другой цвет, просто чтобы сразу заметить его, когда он работает.

Проблема 1. В некоторых из приведенных выше случаев он показывает в два раза больше обычного изображения, иногда в два раза больше изображений сетчатки, но ни в одном из приведенных выше случаев он не показывает нормальное изображение для 1x и 2x для устройств retina. Я тестирую его на ПК, iPhone и с эмулятором Chrome с пользовательским устройством, настроенным на соотношение пикселей 2.

Проблема 2 (на самом деле это не проблема, но …): во всех случаях изображения загружаются в браузер как:

Можно

  1. кто-нибудь указывает, что я делаю неправильно, чтобы 2x-изображение не отображалось?
  2. Как я могу импортировать изображение, чтобы отображался реальный URL-адрес изображения, а не base64, без необходимости создания .env файла и установки значения IMAGE_INLINE_SIZE_LIMIT 0? Любой другой способ добиться того же?

Спасибо

Ответ №1:

Почти есть. Вам просто нужно назвать атрибут в соответствии со стилем JSX, который есть srcSet . Кроме того, все, что вы вводите, src считается загрузкой разрешения по умолчанию, поэтому srcSet вам просто нужно 2x и 3x, если применимо.

Полный пример кода с использованием изображения под названием logo:

 import logo from '../path-to/logo.png'
import logo2x from '../path-to/logo@2x.png'
import logo3x from '../path-to/logo@3x.png'

<img
  src={logo}
  srcSet={`${logo2x} 2x, ${logo3x} 3x`}
/>