Firebase 图像大小调整扩展。引用调整大小的图像答案

【问题标题】：Firebase Image Resize Extension. Referencing the resized imagesFirebase 图像大小调整扩展。引用调整大小的图像
【发布时间】：2020-05-10 21:25:32
【问题描述】：

第一次使用 Firebase 扩展，感觉 Image Resizer 非常适合我的需求。

但是，使用它的文档是一件小事，让我有点卡住了。

目前，我上传图片，它会自动生成新尺寸并将它们保存到我想要的路径。但是，我无法弄清楚如何调用现在调整大小的图像。

我目前正在使用这样的路径存储上传的图像；

      var storageRef = firebase.storage().ref("Project_Image/" + this.projectName + "/" + file.name);

然后使用这样的引用将原始照片作为 url 获取；

firebase.storage()
  .ref("Project_Image/" + this.projectName + "/" + file.name).getDownloadURL()
  .then((url) => {
    this.imageURL = url;
    // eslint-disable-next-line no-console
    console.log("Getting Image " + this.imageURL);
  })

这可行，但问题是我无法引用新创建的 600x300 调整大小的图像。现在称为 imagename_600x300.jpeg。

我尝试过使用

.ref("Project_Image/" + this.projectName + "/" + file.name + "_600x300")

但显然，它会抓取“imagename.jpeg_600x300”，因此返回错误/未定义。

我不确定是否有更好的方法来初始存储这些有助于检索的文件，或者是否有明显的答案。

谢谢！

【问题讨论】：

您必须更改代码以将“_600x300”字符串放在“.jpeg”之前。这将涉及解析file.name 的内容以使用正确的文件名重建新字符串。

标签： firebase vue.js firebase-storage firebase-extensions

【解决方案1】：

听起来您需要去掉扩展名并将其放在前缀之后。像这样的东西应该可以工作：

function resizedName(fileName, dimensions = '600x300') {
  const extIndex = fileName.lastIndexOf('.');
  const ext = fileName.substring(extIndex);
  return `${fileName.substring(0, extIndex)}_${dimensions}${ext}`;
}

【讨论】：