이미지를 가져오는 방법: Vue를 사용하여 base64 또는 ArrayBuffer에서

Question

여기에 설명된 대로 Vue 프런트엔드로 이미지를 보내는 Flask 백엔드가 있습니다.

으아악

Vue 프런트 엔드에서 이 이미지는 결국 웹 페이지에 표시되어야 합니다. 가장 쉬운 방법은 이미지를 정적 폴더에 저장하는 것입니다. 내 매장에서는 다음과 같은 작업을 수행합니다.

으아악

이미지를 저장하고 웹에서 렌더링하는 다른 방법도 시도해 보고 싶습니다. Vuex 스토어에 이미지를 직접 저장할 수 있나요?

Answer 1

Vuex에 이미지 데이터를 저장할 수 있습니다

저장 공간:

으아악

API에서 base64를 받고 있다고 가정하고 원시 데이터를 제출하세요.

으아악

또는 ArrayBuffer이 있는 경우 먼저 변환하세요.

으아악

^{ArrayBuffer를 base64로 변환하는 방법을 여기}

에서 찾아보세요.

템플릿에서 사용하세요:

으아악