Fetching files from the Moralis Database

Hi Moralis!

I’m able to successfully fetch image files based on their URLs in my app (NEXTjs), however, in production, it’s not able to fetch the right URL. It’s a bit strange b/c all of the text/strings import directly.

what i’m doing in the front-end is, within an Image tag, src={item.attributes.icon.url()} — meaning there’s a class and the object has an icon property for a file…and the url() or the _url is the unique link to the file in the Moralis database.

Could you help me understand how to fetch media files to the front-end? It shows in my localhost, but as soon as it’s live on the URL, the image can’t be visualized.

Any help would be greatly appreciated!
Thanks!

maybe you can paste the url that works on localhost and the url that doesn’t work in production

shouldn’t be the same url in both cases?

You’re right, but since I’m using a mapping, it would be a different file link per unique div (per each object).

Is there a ā€œright way to pull in an image Moralis fileā€? For example, if you wanted to pull in an image normally, you’d do:

<Image 
     src="https://moralis.io/wp-content/uploads/2021/06/cropped-Moralis-Favicon-Glass.png"
     height="100px"
     width="100px"
/>

But if the source (src) was coming from a Moralis Object, is this the correct way to pull in an image? src={item.attributes.icon.url()}

<Image 
     src={item.attributes.icon.url()}
     height="100px"
     width="100px"
/>

or am I supposed to pull the .File() or something like that? When I do console.log({item.attributes.icon.url()}) - this prints the exact URL of the file I want in my Moralis server…but it’s weird that in production, I can’t map the image Moralis File, but I can map all of the other data points.

Any help/clarity would be awesome. I was confused by the docs.