홈>

image - JavaScript에서 createObjectURL 사용을위한 Blob 객체를 올바르게 작성하고 있습니까?

.png 에서 가져온 응답을 가져 오려고합니다.  간단한 JS를 사용하여 DOM에 이미지로 배치 할 수 있도록 준비합니다. 하지만 ...

ready().then(() => {
  fetch(`/images/logo.png`)
  .then(response =>{
    if (response) {
      let imageBlob = response.blob();
      let objectURL = URL.createObjectURL(imageBlob);
...

나에게주는 중 ...

Uncaught (in promise) TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.
    at fetch.then.response (fetchImage.js:6)
    at <anonymous>
fetch.then.response       @ fetchImage.js:6
Promise resolved (async)
ready.then                @ fetchImage.js:3
Promise resolved (async)
(anonymous)               @ fetchImage.js:1

내가 console.log(response) 에 던져 경우 전체 응답을 받고 있음을 알 수 있습니다. 그리고 그 console.log(imageBlob)   Promise {<resolved>: Blob(3737)} 를 반환합니다 . 어디 엉망 이니?

javascriptimagedom
  • 답변 # 1

    fetch를 올바르게 사용하면 response.blob ()는Promise를 반환하므로 fetch 를 처리 한대로 처리하십시오.  약속

    ready().then(() => {
  fetch(`/images/logo.png`)
  .then(response => response.blob())
  .then(imageBlob => {
    let objectURL = URL.createObjectURL(imageBlob);
    //...
  });
});

    또는 더 나은 방법

    ready()
.then(() => fetch(`/images/logo.png`))
.then(response => response.blob())
.then(imageBlob => {
  let objectURL = URL.createObjectURL(imageBlob);
  //...
});

    또는 async/await 사용 

    ready()
.then(() => fetch(`/images/logo.png`))
.then(async (response) => {
  let imageBlob = await response.blob();
  let objectURL = URL.createObjectURL(imageBlob);
  //...
});

관련 자료

  • 이전 c# - 사전의 값인 목록에서 개체 인쇄
  • 다음 PHP OOP에서 정의되지 않은 색인 오류 메시지가 발생합니다
    • 관련 질문