Fetching files from the Moralis Database

Moralis General
#1

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!

#2

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?

#3

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.