How to render images with the src obtained remotely?

Current Website:

Issue: Images are not being rendered due to Server 500 error, I’m assuming it cannot find the images.

How I am getting image URLs: I have a local JSON file in my directory that contains strings of URL. The URL points to the same directory under /public/images. i.e …/…/public/images/image.jpg. I am importing the JSON into my function components and destructing them.

What I have tried:

  • installing the ‘sharp’ module, and adding it in a netlify.toml as seen in this support ticket No avail.

  • instead of using ‘remote urls’, I imported the images directly (this one works in production but I rather not have this as my solution).

Is there anything I am missing? Maybe adding more to the netlify.toml file?

In my netlify.toml file I have:

external_node_modules = [“sharp”]

Any advice is welcomed!

It seems like the issue is with the URL paths. Based on your description, it looks like you are trying to access the images using relative paths, and this might not be working as expected.

One potential solution is to use absolute paths instead of relative paths. You can try updating your JSON file to include the full URL path for each image, like this:

  "image1": "",
  "image2": ""

Then, in your code, you can simply use the URLs from the JSON file to render the images:

import imageUrls from './images.json';

function MyComponent() {
  return (
      <img src={imageUrls.image1} alt="Image 1" />
      <img src={imageUrls.image2} alt="Image 2" />

This should ensure that your images are accessible from any page, regardless of the URL path.

If this does not solve your issue, it’s possible that there might be other factors at play. In that case, I would recommend checking the server logs for any error messages or consulting the Netlify support team for further assistance.