Fetch and display image in React JS

Question

I have a code block like this. I am getting data with this Function.

cloudApi.jsx file:

export const fileApi = axios.create({
  baseURL: cloud_url, 
  headers: {
    "Content-Type": "application/json",
    CLIENTID: clientID,
    CLIENTACCESSKEY: clientAccessKey,
    CLIENTSECRETKEY: clientsecretKey,
  },
  credentials: 'include'
});

export const FileService = {
  async getFile(path) {
    try {
      const response = await fileApi.get(path); 
      return response.data;
    } catch (error) {
      console.log("error", error);
    }
  },
};

And this is Logo.jsx file:

  const [imageSrc, setImageSrc] = useState("");

  const getFile = async () => {
    try {
      const path = "src/assets/icons/googleIcon.png";
      const response = await FileService.getFile(path);
      console.log("response", response);      
      setImageSrc(response);
    } catch (error) {
      console.error(error);
    }
  }

  useEffect(() => {
    getFile();
  }, []);

and Response give me a data below;

Result:

�PNG

IHDR00W�� pHYs��IDATx��oLeǟ{Zz�-F��a�?��2 ��ű��4�f�c�� 1(�A q&6덻:\�ڍ�"�7�C��N�sm�UH��٣eI��]��]��O��?($��b(�,�{�M� J� @*HC6�&A��:T�� _4R��6a�$��$,�ƷA�}�:Y8��,�)�YS@1��x � ��c�=��p�Э�y��=< ��ߍ�~��I��h~��8��N4x��=x,2��D�ୱOB%��&i PhP(�HނӘr�6��8[�M��7�!�AXy��Y|@�g��*�R��oT��/��p�(x�y��| @��<z$A-&u&��t��ߐ�z$�l~Y��Q� ��IX��6b�$�_�T��I�9��0ɴN�:��6j�L^q)�u�/X3b4\;a;��w׽��s)��u��<t#�+��5��|�@�}%��z�j��U߂��0_ ��޴=݋��Q��L��F;}%pD7<�C@v�I��g��^�DN�p��菾��(��8�^�T8��CW��{Il����{@̲{K�63 �X8d;��ͣ��_�&|[�zgd�� Z��(~O��D6��7m��L�2��V�&/p\�Ǐ)��i�l��/ik��=)p�/��:�)�R?ff<��8J��3�v��XA�70�W�+�D��[��ވ�^�U��Xs��=�J>��ȧ��ί�P�)rw��Emjg��֜�8��J}zJЗ�r�٘�,+EX�t�q/�g#\�t��2�J�h�SW�$L�_�rL�H�P��;��7u#O�c�� xҢ�r�Y}g��M?"O��G�4t�}oH~Q��&|z��tp|b8n�s5L�7$��sA�za��~��,?+dM��c�Fc��3F5�2��_yC��iF��0�'��zǐ�1x��Î�~�ƫ��34��Ud8�X(x�񸑉��|k�$�g�[��F�L��j:mQePZ�w�~�5d�Ԇ�Ūk��-�~��S��i��%g ']IEND�B`�

I want to display this response image data in img object but I don't know how I can do that.

 <img className="logo" src={mainLogo} alt="PNG Image" />

I try this code but it didn't work.

  const getFile = async () => {
    try {
      const path = "src/assets/icons/googleIcon.png";
      const response = await FileService.getFile(path);
      setImageSrc(`data:image/png;base64, ${response}`);
    } catch (error) {
      console.error(error);
    }
  }

Take a look at this CodeSandbox example. There is no need to fetch the image you can directly insert the path into the src prop of <img> codesandbox.io/p/sandbox/… — Martin Wangen-Eriksen
– Martin Wangen-Eriksen, Commented Feb 9, 2024 at 8:52

Oyinlade Demola · Accepted Answer · 2024-02-09 12:54:00Z

0

That is because you are getting a blob you need, need to set response type and process it accordinly

 const getFile = async () => {
    try {
      const path = "src/assets/icons/googleIcon.png";
      const response = await FileService.getFile(path, { responseType:"blob" });
var reader = new window.FileReader();
        reader.readAsDataURL(response); 
        reader.onload = function() {

            var imageDataUrl = reader.result;
setImageSrc(imageDataUrl);

        }
    } catch (error) {
      console.error(error);
    }
  }

answered Feb 9, 2024 at 12:54

Oyinlade Demola

7005 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Oyinlade Demola Over a year ago

you can also use response type of buffer any one that works for you you can also look at stackoverflow.com/questions/41846669/…

Collectives™ on Stack Overflow

Fetch and display image in React JS

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related