如何使用firebase调整图像扩展表reactjs应用程序来调整大小的图像URL？

Question

我有ReactJS应用程序和一些图像要显示。现在，我尝试优化我的图像。因此，我尝试使用Firebase的调整大小图像扩展名调整大小并将图像更改为WebP格式。因此，我得到了带有名称的图像，示例test_album_40x40.webp，test_album_300x300.webp。我的问题是我如何获得该网址。当我上传image.jpeg时，我从firestore获得了以下URL返回。

test_album.jpeg（上载时从firestore返回并将其存储在db中的原始URL）

https://firebasestorage.googleapis.com/v0/b/myanmargita-bf003.appspot.com/o/images/albums/test_album.jpeg?alt=media&token = EDD4799B-5B23-4940-B0F8-88CE57329625

test_album_40x40.webp

https://firebasestorage.googleapis.com/v0/b/project_id.appspot.com/o/images/albums/thumbs/test_album_40x40.webp?alt=media&token = CB2B2C92-68C6-49E8-8B64-B2788B7A1396

test_album_300x300.webp

https://firebasestorage.googleapis.com/v0/b/myanmargita-bf003.appspot.com/o/images/albums/thumbs/test_album_300x200.webp?alt = Media＆amp; token = CB2B2C92-68C6-49E8-8B64-B2788B7A1396

更新事件到Firestore并保存到DB

const handleSave = async (data) => {
const file = data.album_cover;
const storageRef = ref(storage, "images/albums/" + file.name);
const  uploadTask = uploadBytesResumable(storageRef,file);
uploadTask.on(
  "state_changed",
  (snapshot) => {
    var progress = Math.round(snapshot.bytesTransferred / snapshot.totalBytes) * 100;
    setUploadProgress({ progress });
  },
  (error) => {
    throw error;
  },
  () => {
    getDownloadURL(uploadTask.snapshot.ref).then((url) => {
      data.album_cover = url;
      add_albumByArtist({
        variables:addVariable(data, auth),
        refetchQueries: [getAlbums]
      });
    }
    );
  }
);
navigate(-1);
  };

Answer 1

我遇到了同一问题，这就是我的做法。我只使用100x100尺寸，但您可以根据需要多次调用它。

uploadStatus.on("state_changed",(snapshot) => {
 const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
 setImageUploadProgress(progress);
 },
 (error) => {
  throw error;
 },
async () => {
 const url = await getDownloadURL(uploadStatus.snapshot.ref);
 const imagePath = uploadStatus.snapshot.ref.fullPath;
 let imageName = imagePath.substring(imagePath.lastIndexOf("/") + 1);
 const extension = imageName.split(".").pop();
 const name = imageName.split(".").slice(0, -1).join(".");
 imageName = name + "_" + "100x100" + "." + extension;
 const storageRef = ref(firebaseStorage, "path_to_storage_resize_images_folder" + imageName);
 const thumbURL = await getDownloadURL(storageRef);
 setImageSource(url);
 setImageThumb(thumbURL);
});