해결된 질문
24.11.02 01:19 작성
·
34
·
수정됨
0
안녕하세요
Flutter로 web 페이지를 만들고 이것을 firebase hosting을 통해 배포하고 있습니다.
image file을 firebase storage, google drive에 올려두고 URL을 가지고 image.network를 통해 표출하고 있습니다.
그런데 실행할 때마다 아래 오류 메세지와 함께 사진이 정상 표출되지 않습니다.
======== Exception caught by image resource service ================================================
The following ProgressEvent object was thrown resolving an image codec:
[object ProgressEvent]
When the exception was thrown, this was the stack:
Image provider: NetworkImage(....)
Image key: NetworkImage(....)
Android app으로 실행시킬 때나 구글링에서 나온 flutter run -d chrome --web-renderer html 커맨드로 실행했을때는 정상 표출되는 것을 확인했습니다.
그런데 Firebase로 hosting 히면 계속 안 보이네요..
index.html을 수정하면 되다는 얘기가 있던데.... 어떻게 처리하면 되는지 잘 모르겠습니다.
혹시 가이드 요청드려도 될까요?
감사합니다.
제가 사용하고 있는 버전들은 다음과 같습니다.
Flutter 3.24.0-1.0.pre.348 • channel master • https://github.com/flutter/flutter.git
Framework • revision 85960d24b9 (3 months ago) • 2024-07-30 09:03:00 +0200
Engine • revision c58d87d62c
Tools • Dart 3.6.0 (build 3.6.0-91.0.dev) • DevTools 2.37.1
firebase_core: ^3.6.0
cloud_firestore: ^5.4.4
답변 3
1
0
2024. 11. 02. 01:52
아니. AI 인턴이 2분만에 답을 해 버리네.
로컬에서는 되고 배포하면 안 되는 경우 대부분 CORS 설정 때문입니다.
인턴 말대로 해 보시기 바랍니다.
0
안녕하세요, 인프런 AI 인턴입니다. 박찬홍님.
Flutter 웹 프로젝트에서 Firebase Hosting을 통해 배포할 때 이미지가 정상적으로 렌더링되지 않는 문제에 대해 살펴보겠습니다. 이 문제를 해결하기 위해서는 index.html
파일을 수정하여 CORS(Cross-Origin Resource Sharing) 설정을 확인해야 합니다.
Flutter 웹 앱에서 NetworkImage를 사용하여 Firebase Storage 혹은 Google Drive와 같은 외부 URL에서 이미지를 불러오려면 CORS 설정이 올바르게 되어 있어야 합니다. CORS는 웹 브라우저에서 도메인 간 자원 공유를 허용하도록 설정해주는 기능이며, 제대로 설정되지 않을 경우 이미지가 로드되지 않을 수 있습니다.
Firebase Storage에 업로드된 이미지를 표시하려면 먼저 CORS 설정을 올바르게 설정해야 합니다. CORS 설정은 Firebase CLI를 사용하여 구성할 수 있습니다. 다음은 예시 JSON 설정 파일입니다.
[
{
"origin": ["*"],
"method": ["GET"],
"maxAgeSeconds": 3600
}
]
위 설정은 모든 도메인에서 이미지를 가져올 수 있도록 허용합니다. 이 설정을 사용하면 웹 브라우저에서 Firebase Storage에 저장된 이미지를 로드할 수 있습니다.
Firebase 프로젝트의 리소스에 CORS 설정을 추가하려면 다음 명령어를 실행하세요:
gsutil cors set cors.json gs://[YOUR_BUCKET_NAME]
index.html
파일에 특별히 수정이 필요한 부분은 없습니다. 하지만 만약 CORS 문제가 웹 브라우저에서의 HTTP 요청에 기인한 것이라고 판단된다면, 위의 CORS 설정을 통해 해결하시면 됩니다.
Flutter와 관련 라이브러리의 버전이 최신 상태인지 확인하세요. 특히 Flutter, firebase_core, cloud_firestore 등의 버전이 호환 가능한지 확인하세요. 현재 알려주신 버전은 최신 버전이고 문제가 되는 버전은 아닌 것 같습니다.
기본적인 CORS 문제 해결과 관련된 정보는 구글의 CORS 가이드에서 확인하실 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.