Блог

Главная - Вопросы по программированию - React не отображает мое изображение с измененным размером. Почему?

React не отображает мое изображение с измененным размером. Почему?

#reactjs #image-resizing

#reactjs #изменение размера изображения

Вопрос:

Мое приложение запускается без сообщения об ошибке, но я не могу понять, почему мое изображение не отображается.

 import React from 'react';
import rec from '../images/rec.jpg';
import Resizer from 'react-image-file-resizer';

class Recumbent extends React.Component {

    resizeFile = (file) => new Promise(resolve => {
            Resizer.imageFileResizer(file, 300, 200, 'JPEG', 100, 0,
            uri => {
              resolve(uri);
            },
            'base64'
            );
        });

    render() {
        return <img src={this.resizeFile(rec.blob)} alt="recumbent" />
    }
}

export default Recumbent;

Комментарии:

1. пожалуйста, предоставьте рабочий фрагмент, если у вас есть фрагмент, который четко показывает вашу проблему, он решит вашу проблему намного быстрее, чем без фрагмента, например, вы можете создать фрагмент из code sandbox

2. Это мой фрагмент. Он просто не делает то, что я ожидаю (в моем приложении отображается только текст alt (лежащий).

3. итак, создайте демонстрацию вашей проблемы, чтобы мы могли решить ее как можно скорее

Ответ №1:

Вы можете сделать что-то вроде этого:

 import React from 'react';
import rec from "./picture.jpg";
import Resizer from "react-image-file-resizer";

const resizeFile = async (file) => {
  const image = await fetch(rec);
  const imageBlob = await image.blob();

  return new Promise((resolve) => {
    Resizer.imageFileResizer(
      imageBlob,
      300,
      300,
      "JPEG",
      100,
      0,
      (uri) => {
        resolve(uri);
      },
      "base64"
    );
  });
};

const App = () => {
  const [uri, setUri] = React.useState(null);

  React.useEffect(() => {
    async function uriAfterResize(file) {
      const image = await resizeFile(file);
      setUri(image);
    }
    uriAfterResize(rec);
  }, []);

  return <img src={uri ? uri : ""} alt="recumbent" />;
};

export default App;

Подход, который вы использовали ранее, не учитывает тот факт, что ваша resizeFile функция возвращает обещание. Это означает, что извлечение base64 изображения является асинхронным процессом.

Мой примерный подход ожидает до тех пор, пока обещание не разрешит uri то, что мы хотим, после чего мы обновляем некоторое состояние, которое условно передается src реквизиту изображения.