이미지 파일을 서버로부터 가져오는 방법

❓ 화면에 이미지가 잘 뜬다는것은, 서버에 그 이미지가 있다는 뜻인데, 왜 아래의 axios.get()으로부터 응답은 받지 못하고, 오류가 날까?

const getImage = async function (name) {
  try {
    const res = await axios.get(
      `https://11.fesp.shop/products/files/vanilla05/${name}`,
      {
        headers: {
          'client-id': 'vanilla05',
        },
      },
    );
    console.log(res, res.data);
  } catch (err) {
    console.error(err);
  }
};
getImage('NIKE_ZEGAMA_d_01.png');

 

지금 작성하신 getImage() 함수에서 발생하는 오류는 아마 이미지를 직접 서버에서 요청하는 방식과 관련이 있을 가능성이 큽니다. 이미지 파일은 일반적으로 JSON 데이터를 포함하지 않고, 바로 바이너리 형식 또는 URL 경로로 반환됩니다. 그래서 axios.get()을 통해 이미지를 요청하는 것이 일반적인 방법이 아닐 수 있습니다.

이미지의 경로가 정확하고, <img> 태그에서 잘 표시된다면, 이미 이미지 파일이 웹서버에 있는 것으로 확인됩니다. axios.get()을 사용해 이미지를 불러오는 것은 이미지 파일을 HTTP 요청으로 받아오려는 것인데, 이미지 URL만 필요하다면 <img src="...">에서 이미지 경로를 지정하는 것이 더 효율적입니다.

 

- 중요한 포인트:

1. axios.get()은 주로 JSON 응답을 가져오는 데 사용되며, 이미지처럼 바이너리 데이터를 직접 처리하려면 다른 방법이 필요합니다. 즉, 이미지 URL을 <img>의 src 속성에 넣는 방식이 가장 간단하고 표준적입니다.
2. 이미지 파일은 JSON 형식이 아니라서, res.data를 JSON으로 변환하거나 처리하려는 것은 맞지 않을 수 있습니다.

💥 왜 오류가 발생할 수 있는가?

• axios.get()으로 이미지 파일을 가져오면 해당 파일은 바이너리 데이터로 응답됩니다. 만약 서버가 이미지를 잘 제공하고 있다면, res.data는 이미지 데이터일 수 있는데, 이것을 console.log로 출력하려고 할 때 오류가 발생할 수 있습니다.
• 브라우저에서 이미지 요청은 단순히 <img src="...">에서 URL을 통해 이미지를 로드하는 방식으로 충분합니다. 이미지를 불러오기 위해 추가적인 axios.get() 요청을 할 필요는 없습니다.

💡 해결책

1. axios.get()을 통한 이미지 요청을 하지 않고, 이미지 경로만 제공하는 방식으로 수정:

const getImage = function (name) {
  return `https://11.fesp.shop/files/vanilla05/${name}`;
};

 

2. <img> 태그에서 해당 함수를 호출:

<img src="${getImage(item.mainImages[0].name)}" />

 

 

🤔 만약 반드시 axios를 써서 이미지를 처리해야 한다면:

이미지를 바이너리 데이터로 처리해야 할 경우에는 axios에서 responseType: 'blob'을 사용하여 이미지를 다룰 수 있습니다.

이 방법은 이미지를 Blob 형식으로 받아서, 해당 데이터를 브라우저에서 사용할 수 있도록 URL 객체로 변환하는 방식입니다.

그러나, 이미지 URL이 이미 주어졌다면 굳이 이렇게 복잡하게 처리할 필요 없이, 바로 URL을 <img> 태그의 src 속성에 설정하는 것이 더 간단하고 효율적입니다.

 

예를 들어:

const getImage = async function (name) {
  try {
    const res = await axios.get(
      `https://11.fesp.shop/files/vanilla05/${name}`,
      {
        headers: {
          'client-id': 'vanilla05',
        },
        responseType: 'blob', // 이미지를 바이너리 형태로 받음
      }
    );

    const imageUrl = URL.createObjectURL(res.data); // 바이너리 데이터를 URL로 변환
    console.log(imageUrl);
    // 이 imageUrl을 <img> 태그에 넣을 수 있음
  } catch (err) {
    console.error(err);
  }
};
getImage('NIKE_ZEGAMA_d_01.png');