CODEWITHSUNDEEP
javascriptnode.jsexpressfeathersjs
theJuls
theJuls

Reputation: 7470

GET image files from static folder and display them in client app

I am storing images in a static folder in my express server app. So far this works as expected. The code that matters for this is as follows

app.use('/uploads', express.static(Path.join(__dirname, `/../uploads`)))

Now from the client app, I need to do a GET request on these images and display them, as it stands, just doing a request on my image gives me unusable data which I don't know how to handle. Here is a sample of what I am talking about:

IHDRXZ��9�|iCCPICC Profile(�c``*I,(�aa``��+)
rwR���R`������ �`� ��\\��À|����/���J��yӦ�|�6��rV%:���wJjq2#���R��d

Is there a way I can get this data and use it as the image?

I have also read up an alternative way of sending images over the wire between the client and server, which would be to set up my GET request. From this thread Basically using express' .sendFile, this however does not work as I get a 404 not found. Is there something else wrong?

Anyway, I guess the question is how can I get the files in a format that I can display them on my client app?

This is what my client code looks like:

return isomorphicFetch(`${MY_URL}/${imageId}`, {
    headers: {
      Accept: 'application/json'
    }
    method: 'GET'
  })
.then(res => {
    console.log('My fetched image', res)
    return res
 })

Upvotes: 1

Views: 1038

Answers (1)

P Varga
P Varga

Reputation: 20269

Why not just use an <img> element?

const img = document.createElement('img');
img.src = `${MY_URL}/${imageId}`;
someplace.appendChild(img);

BTW if, for some reason, such as sending custom HTTP headers, you want to use fetch():

fetch(`${MY_URL}/${imageId}` /*...*/)
  .then(res => res.blob())
  .then(blob => {
    const img = document.createElement('img');
    img.src = URL.createObjectURL(blob);
    somewhere.appendChild(img);
  });

Upvotes: 2

Related Questions