리액트에서 DB(mysql) 이미지 불러오는 방법

Question

데이터 베이스에 Blob형태로 저장된 이미지를 브라우저로 불러오려고 하는데 버튼을 클릭하면"Uncaught Error: Objects are not valid as a React child (found: object with keys {type, data}). If you meant to render a collection of children, use an array instead." 이런 오류가 나옵니다.object형태라서 뭔가를 변환해야 한다는건 알겠는데 완전 생초보라.. 예제를 찾아봐도 방법을 모르겠네요..혹시 알려주실 분 계실까요? //====== server.js === ... app.get('/api/customers', (req, res) => { connection.query('SELECT * FROM study', (err, rows, fields) => { res.json(rows); }); }); ... //====== client.js === ... const [dbData, setDbData] = useState([]); const fetchData = () => { fetch('/api/customers') .then((res) => res.json()) .then((data) => { setDbData(...dbData, data); console.log(data); }); }; return ( <> {dbData.map((data) => (

{data.image.data}

))} ... server로 불러온 json 형태는 아래와 같습니다. [{"id":5,"title":"pd","image":{"type":"Buffer","data":[104,111,109,101,47,112,100,47,105,109,103,95,99,111,110,48,51,48,51,48,49,48,48,95,48,49,46,106,112,103]}},{"id":6,"title":"pd","image":{"type":"Buffer","data":[104,111,109,101,47,112,100,47,105,109,103,95,99,111,110,48,51,48,51,48,49,48,48,95,48,49,46,106,112,103]}}]

꿀사읻 · Answer

https://aljjabaegi.tistory.com/443 이런식으로 나와있긴 합니다.검색은 &#34;자바스크립트 blob&#34; 검색해보시면 될듯합니다.

qoalstn · Answer

답변 감사합니다. 아래처럼 넣었는데 Career.js?9575:39 Uncaught ReferenceError: data is not defined라고 나오네요 ㅜㅜ 제가 어떤걸 잘 못 한걸까요..ㅠ //&#61;&#61;&#61;server.js const fetchData &#61; () &#61;> { fetch('/api/customers') .then((res) &#61;> res.json()) .then((data) &#61;> { setDbData(...dbData, data); console.log(data); //추가 let bytes, blob; bytes &#61; new Uint8Array(data.blob); blob &#61; new Blob([bytes], { type: 'image/bmp' }); data['imgSrc'] &#61; URL.createObjectURL(blob); }); }; //&#61;&#61;&#61; client.js return 부분에 추가 <img src&#61;{data['imgSrc']} />

moonti · Answer

bmp 확장자 맞나요?서버에서만 이미지 형태로 잘 넘겨주면 되겠는데요. 근데 왜 이미지를 mysql에 저장하세요? 꼭 그래야 하나요?

qoalstn · Answer

회사에서 DB에 저장된 이미지를 브라우저에 띄울 수 있도록 만들어 보라고 하셔서욤.. 다시 보니 확장자가 틀려서 수정했습니다.!근데 변경해도 여전히 Career.js?9575:41 Uncaught ReferenceError: data is not defined 라고 나옵니다 ㅠ에러나는 return부분을 주석처리하고 console.log를 띄워 보면 아래처럼 나오는거 보니 변환은 잘 된거 같은데 화면에 띄우는 방법을 모르겠어요..ㅠ (2) [{…}, {…}]0: id: 5image: {type: &#34;Buffer&#34;, data: Array(30)}title: &#34;pd&#34;__proto__: Object1: id: 6image: {type: &#34;Buffer&#34;, data: Array(30)}title: &#34;pd&#34;__proto__: ObjectimgSrc: &#34;blob:http://localhost:3333/b057cdd7-5840-4226-bff1-4fa06c831e11&#34;length: 2__proto__: Array(0) Career.js?9575:31 blob:http://localhost:3333/b057cdd7-5840-4226-bff1-4fa06c831e11

컴포지트 · Answer

API에서 BLOB 데이터를 가져오면 보통 노드의 DB 드라이버는 ArrayBuffer 등을 쓸 겁니다.하지만 이걸 웹 페이지에서 한꺼번에 가져오려면 좀 고통스러울 겁니다. 데이터가 크면 클수록 더요.만약 JSON으로 한꺼번에 가져올 생각을 한다면 base64 uri 문자열 변환을 고려해야 합니다. CPU 및 메모리 이슈가 있을 수 있고, 원본보다 내용이 더 길며 클라이언트도 변환해야 하니 유지보수도 어렵습니다.가장 효율적인 방법은 별도의 이미지 가져오는 API를 만드는 겁니다 id를 불러 BLOB 이미지만 받은 후, 그걸 바로 image/xxx mime 형식으로 바이너리 자체를 뱉는 거죠.그러면 원래 API에는 어떻게 하냐? 이미지를 부를 수 있는 id가 첨부된 API 주소를 넣어 그걸 img 태그 src 속성에 박아주면 끝이죠.messagepack 같은 바이너리 호환 전송 레이어 도입이나, socket.io 처럼 이벤트 기반의 웹소켓으로 바이너리 데이터까지 오가는 방법의 전략도 고려할 수 있지만, 저같으면 이미지만 불러오는 별도의 API 생성을 추천합니다.

qoalstn · Answer

감사합니다.! API만드는게 어렵네요 ㅠㅠ 시도해보고 성공하거나 막히는 부분 있으면 또 올리겠습니다!

리액트에서 DB(mysql) 이미지 불러오는 방법

6개의 답변

#blob 목록