0

Basically I have an img on a server and I access that using fetch which also authenticates the img. Ive seen online that I would need to convert it to base64 in order to display it. Im using React and ANTD and its for an image uploader. The uploading part is fine but the problem is when I log back into the page, I only have the file name saved so I need to make the call to the server which is in the fetch. Then I try to set the new vars to logoFileList. I need to see the image preview. What properties of the image object does the antd file uploader use?

fetch()
.then(res => {
    const data = `${Buffer.from(res.url).toString(base64)}`;
    const fileList = [...logoFileList];
  fileList[index].url = data;
  fileList[index].thumbUrl = data;
  setLogoFileList(fileList);
})

Ive spent all day working on this any help would be great. Thanks. I cant just display the image url because its authenticated and gives me a 403 error.

chrus54321
  • 125
  • 7
  • 403 error means you don't have access to the file, so it's the problem with your authenticity when you try to get the file. – Ryan Le Oct 28 '20 at 19:33
  • @RyanLe I have access to the file I just cant display it on the screen. The 403 error was putting it straight from the url to an img tag – chrus54321 Oct 28 '20 at 19:34
  • If you said so, then you could display it using base64 directly by using img tag. [link](https://stackoverflow.com/questions/8499633/how-to-display-base64-images-in-html) – Ryan Le Oct 28 '20 at 19:52
  • @RyanLe the image is authenticated. I need to use the fetch api – chrus54321 Nov 02 '20 at 00:55

0 Answers0