Question

我从api获取了一个随机图像（它是对象），我想将其放入对象中的对象以使用该图像。当我在控制台上记录“数据”时，一切正常，我可以看到该图像对象，但是当我在控制台上记录“ data.image”时，控制台向我返回一个空对象，该对象应该是获取的对象。我是初学者。

let data = {
   image: {},
   votes: []
}


async function getImage() {
    let img = await fetch(data.getImgUrl, {
        method: "GET",
    })

    const newImg = await img.json();
    data.image = await newImg[0]
}

当我在控制台上记录“数据”

控制台登录我：图片{，这里是包含此获取的数据的属性}和投票：[]

当我在控制台上记录“ data.image”

控制台登录我：图像{作为一个空对象}

Answer 1

您获取图像，但是尝试将其解码为JSON。这是行不通的。您将需要执行以下操作（我还没有写过），我从here开始使用它，它使用的是arrayBuffer。

// we use this to get the immage from the buffer
function arrayBufferToBase64(buffer) {
  var binary = '';
  var bytes = [].slice.call(new Uint8Array(buffer));
  bytes.forEach((b) => binary += String.fromCharCode(b));
  return window.btoa(binary);
};

fetch(request, options).then((response) => {
  response.arrayBuffer().then((buffer) => {    
    // make an image from the buffer
    var imageStr = arrayBufferToBase64(buffer);
   // use image where you want. e.g. out it into an image tag
    document.querySelector('img').src = 'data:image/jpeg;base64,'+ imageStr;
  });
});

这也许也值得一读： https://developer.mozilla.org/en-US/docs/Web/API/Streams_API/Using_readable_streams

将获取的数据放入对象中的问题

1 个答案: