Nuxt require() dynamic images - cannot find module

Question

I am trying to get Nuxt/image to work with dynamic images. As per this thread I am requiring the image. However, on generating a static site I am getting "Cannot find module" errors for every image. I tried every possible way to create the path I could come up with.

My folder structure is like this:

nuxt-project/content/projects/project1/project1.md
nuxt-project/content/projects/project1/image1.jpg
nuxt-project/content/projects/project1/image2.jpg

I tried generating the path like this

pathForImage(filename) {
    return "~/content/projects/" + this.project.id + "/" + filename;
}

also

return "./content/projects/" + this.project.id + "/" + filename;

return "../content/projects/" + this.project.id + "/" + filename;

But everything results in

Error: Cannot find module './content/projects/project1/project1.jpg'
    at webpackEmptyContext (webpack:/components/global sync:2:0)

or

Error: Cannot find module '../content/projects/project1/project1.jpg'

or

Error: Cannot find module '~/content/projects/project1/project1.jpg'

The file exists of course. I also tried using the static directory in case the problem lays with using the content directory, but I'm getting the same error.

Answer 1

try this

pathForImage(filename) {
    return require("~/content/projects/" + this.project.id + "/" + filename)
}

you should use "require"