새 제목: Vue를 사용하여 Firebase Cloud Storage Blob의 이미지 표시

Question

저는 사용자가 제품 바코드를 스캔한 다음 표시할 제품 사진과 함께 제품에 대한 데이터를 반환하는 제품 조회 저장소를 구축 중입니다.

이제 테스트 목적으로 Firebase 버킷을 설정하고 이미지를 업로드했습니다. Firebase 저장소 API를 호출하여 이미지를 성공적으로 검색했지만 Vue 앱에 표시할 수 없는 것 같습니다. 예제에서는 순수 js와 html을 사용하므로 Firebase 문서에서 올바른 문서를 찾을 수 없는 것 같습니다.

이미지를 표시하는 코드:

으아악

페이지가 로드될 때 실행되는 스크립트는 버킷에서 이미지를 가져와 표시합니다.

으아악

크롬에서 개발자 콘솔을 확인하면 네트워크 탭의 API 호출에 있는 미리보기에서 이미지를 볼 수 있기 때문에 API 호출이 작동한다는 것을 알고 있습니다. vue에 표시할 수 없는 것 같습니다.

이미지를 Blob으로 저장하나요?

요청한 대로 답변을 추가했습니다.

Answer 1

Vue 디스플레이 blob에 문제가 있을 수 있습니다. 시도해 보세요:

으아악

여기 URL.createObjectURL Blob에 대한 참조가 생성되어야 합니다.

Answer 2

문제는 blob이 아니라 이미지를 표시하는 vue 태그에 있습니다. 우리는 아래와 같이 <img> 代替 <image>를 사용합니다:

으아아아