Блог

Я пытаюсь использовать react-image-file-resizer , и у меня это работает в некоторых частях моего приложения, но сейчас я пытаюсь обработать ответ от сервера aws изображения. Формат изменен, и я получаю сообщение об ошибке item is not type BLOB : есть ли способ преобразовать URL-адрес, возвращаемый с сервера aws, в большой двоичный объект типа?

Это компонент, с которым я работаю :

 const Items = ({ orgList }) => {
  const [logos, setLogos] = useState()
  
  const resizeImage = (image) =>
  new Promise((resolve) => {
    Resizer.imageFileResizer(
      image,
      200,
      200,
      "JPEG",
      100,
      0,
      (uri) => {
        resolve(uri);
      },
      "base64"
    );
  });

  const imageHelper = async (image) => {
    const sizing = await resizeImage(image)
    setLogos(sizing)
  }

  return (
    <>
      {orgList.items ? (
        <div>
          {orgList.items.map((item) => (
            <Card key={item.orgID} className="w-100 m-2">
              <CardHeader className="d-flex">
                <Link to={`/monitoring-orgs/${item.orgID}`}>{item.name}</Link>
              </CardHeader>
              <CardBody>
                <Row>
                  <Col md="5">
                    <dl>
                      <dt>GroupID</dt>
                      <dd>{item.GroupID || "-"}</dd>
                      <dt>Logo</dt>
                      <dd>
                        {imageHelper(item.logoURL)}
                        {!item.logoURL ? (
                          "No logo uploaded"
                        ) : (
                          <img src={logos} alt={"company logo"} />
                        )}
                      </dd>
                    </dl>
                  </Col>
                  <Col md="5">
                    <dl>
                      <dt>OrgID</dt>
                      <dd>{item.orgID}</dd>
                      <dt>Enabled</dt>
                      <dd>{item.enabled ? "Yes" : "No"}</dd>
                    </dl>
                  </Col>
                </Row>
              </CardBody>
            </Card>
          ))}
        </div>
      ) : (
        <div className="buttonSpinner">
          <Spinner />
        </div>
      )}
    </>
  );
};
export default connect(mapStateToProps, mapDispatchToProps)(Items);