ReactJS: изображение srcset не работает при использовании импорта - PullRequest
Новая
       11

ReactJS: изображение srcset не работает при использовании импорта

0 голосов
/ 10 ноября 2019

У меня проблема с тем, чтобы srcSet работал в create-реагировать-приложение, ЕСЛИ НЕ УКАЗЫВАЮ http: // link.

Вот пример, который работает (Avatar_1 и Avatar_2 находятся в моей общей папке):

import React, { Component } from 'react';

const Avatar1 = 'http://localhost:62524/images/Avatar_1.png';
const Avatar2 = 'http://localhost:62524/images/Avatar_2.png';

class App extends Component {
  render() {
    return (
          <img style={{ display: 'block' }} sizes="100vw" src={Avatar1} srcSet={`${Avatar1} 320w, ${Avatar2} 640w`} />
    );
  }
}

export default App;

Это хорошо работает. Я отключил кеш, перехожу в режим проверки и на маленьком экране он использует Avatar1, а на большом экране тег img использует Avatar2.

Однако, если я импортирую его по пути к папке, ReactJS будет использовать base64строки изображения в атрибутах src. Проблема в том, что srcSet перестает работать и последовательно использует самое большое разрешение (только протестировано в Chrome). Вот пример, когда srcset не работает и всегда отображает Avatar2: 

import React, { Component } from 'react';

import Avatar1 from './assets/avatar_1.png';
import Avatar2 from './assets/avatar_2.png';

class App extends Component {
  render() {
    return (
      <img style={{ display: 'block' }} sizes="100vw" src={Avatar1} srcSet={`${Avatar1} 320w, ${Avatar2} 640w`} />
    );
  }
}

export default App;

Я видел несколько онлайн-уроков, в которых утверждается, что этот подход (прямой импорт вместо указания URL-адресов http для изображений) должен работать, но в моем случае это не так.

Кто-нибудь знает, как получить прямой импорт изображений для работы с srcSets?

...