Блог

Я отображаю изображение с помощью реквизитов, подобных этому :

 function AdImg(props) {
    const propImg = `http://localhost:5000/${props.img}`;
    return (
                <img
                    placeholder={require('../../../app-data/img/default.png')}
                    alt="ad-img"
                    className="img-fluid rounded"
                    src={propImg}
                />
    );
}

export default AdImg;
  

Проблема в том, что когда этот компонент отображает, он не показывает заполнитель, пока не отобразит фактическое изображение.

Как я могу установить изображение-заполнитель по умолчанию, чтобы оно отображало заполнитель до тех пор, пока не отобразится фактическое изображение?

Что-то вроде этого должно сработать

 export default function App() {
  const [isLoading, setIsLoading] = useState(true);

  function onLoad() {
    // delay for demo only
    setTimeout(() => setIsLoading(false), 1000);

   // setIsLoading(false)
  }

  return (
    <>
      <img
        alt="ad-img"
        width={300}
        src="https://via.placeholder.com/300x200/FF0000"
        style={{ display: isLoading ? "block" : "none" }}
      />
      <img
        alt="ad-img"
        width={300}
        src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS1hIjBaj0A0XNB_xAozRAcFs6Gr0DQhWTGiQamp;usqp=CAU"
        style={{ display: isLoading ? "none" : "block" }}
        onLoad={onLoad}
      />
    </>
  );
}
  

… мы показываем 2 изображения, заполнитель и само изображение. Пока загружается фактическое изображение, мы собираемся отобразить заполнитель, после его загрузки мы собираемся скрыть заполнитель и показать фактическое изображение.

Для меня это сработало только после того, как я изменил второй стиль изображения (тот, который мы хотим показать после его загрузки) на {visibility: loading ? 'hidden' : 'visible'} .