Nuxt.js: Why do my images not show up after nuxt generate

[pnSauces2017]

I am creating a static site with nuxt. Everything works in dev, but when I generate my site it no longer has any of the images where it previously did? My images are living in the static directory at the moment. I feel like someone else has to have come across this and that there is a pretty straight forward fix

_{This question is available on Nuxt.js community (#c1500)}

[gvinter]

/_nuxt/IMAGE is in the image's src for me. It's actually ALMOST the correct location of the file, you just need to add a . to the beginning of the image or remove the first /. Then the image appears.

Problem is, I don't know how to make this fix during the generation...

[gvinter]

@pnSauces2017 - I figured this out finally!

Generating to /dist doesn't just generate static files that can be opened as HTML files in a browser. You must point a local server (ie. nginx) at the /dist directory and access via the server, such as localhost:8000.

So if you haven't already, install nginx, then point you nginx.conf's file's root location at the /dist folder you want to serve...

server {
    location / {
            root   /Users/gvinter/NUXT_PROJECT/dist;
            index  index.html index.htm;
    }
}

And that works for me!

[estevanmontoya]

I only had two images in my test build and I had to prepend image urls in the dist folder with a period . as mentioned by @gvinter

While it was simple for me, though I turned off minification as well, I can see this being problem-some for larger sites with more images.

[Gillis86]

Hi, I'm experiencing the same issue, there is some way to remove the first '/' during the nuxt generate process? In automatic? Thanks

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.