Load image if it exists or load another image in Remix-CodePudding

I have a bunch of goods with (or without) photos.
I need to load image if it exists or show a common (like blank) image.
the stack is Remix, Prisma and mySQL db.
Seems like storing images in mySQL is impossible (or is it?)
Also it seems like storing image path in db would be difficult in maintenance (or it is a solution? :D)
Here is what I tried:

 const getPicture= (path) => {
    try{
        const pic = require(`~/images/categories/${path}`)
        return pic;
    }
    catch(err){
        console.log('ERROR:', err)
        return noPic;
    }
  }

I tryed to put this code in page, tryed to put it in loader, tryed to put pictures to a public or private folder
(without ~ in require path ofc)

when this runs in loader it says module not found (path/to/image)
when I run this in page code it says that dynamic require isn't supported.

How or how else can I achieve the goal? I started react and js coding this January so, well, Im a noob :D

UPD: thank you IT goldman, that was close! Finally all works with

<img 
   src={'/path/in/public'} 
   one rror={(e) => (e.target.onerror = null, e.target.src = dino)}
/>

CodePudding user response：

Maybe try first

<img alt='' src={ '...'} one rror={this.src='https://picsum.photos/200'}/>