How to display image in React-Admin from local folder - path fetched from mongoDB

Question

I fetch data from my mongoDB server. Everything displays correctly but the image.

<ImageField source='filename' title="image" />

filename is, let's say, 'book-2929646_960_720.jpg'. This image is stored in a local folder (not the same one as my react-admin component).

How should I modify the source path for the image to be displayed? I've tried using template literals in order to build the path, but it doesn't work.

Answer 1

You can't do that with <ImageField> - that's a current limitation.

You can use the <FunctionField> for that:

const FilenameField = props => <FunctionField 
   {...props}
   render={record => <img src={`/foo/bar/${record.filename}`} title="image" />} 
/>;