Nuxt requiring images where the path is taken from database

I’ve been trying to build a system where an image path is taken from a column in the database. The problem is, if I do the full path of “~/assets/images/image.jpg” it completely breaks and says it can’t find the module… Before the page is even loaded at that.

I managed to fix it “somewhat” by making the database column slimmed down and making it :src="require(`~/${imagePath}.jpg`)" but that isn’t really that useful. It would be fine if the .jpg wasn’t required, and didn’t break everything, but what if I include an image that is .png?

Is there a way to make this actually dynamic in nuxt? Because this basic syntax which should work just breaks everything. It’s not very useful to have “dynamic images” as nuxt calls it, if you can’t even make them dynamic.

Alternatively if there’s a good forum source for nuxt-specific questions, or a discord server. Linking me to there would work. Obviously there’s the github but that’s more for bugs imo

I’m a bit confused by this. You’re talking about referencing data from a database, but then you’re using require which is used to import local assets in your project directory.

The database column only contains the path at which the image asset is saved.

Right, but where are your images actually being stored - the ones the database is referencing?

In the assets folder. Technically its assets/staff-imgs/(employee name)/(employee name)-small.jpg
What’s in the database right now is (employee name)/(employee name) and nuxt has
~/assets/${path}.jpg but it doesnt work. Cant find the module. Even though it exists.
I might get some pictures as an example if you think it might help.