0
168
Vistasnuxt-img and js files cannot loaded on production mode on server
I'm just learning Nuxt JS, and it's fine on my local computer until i want to try to deploy it on the server, It's just a simple App, just Image and Text, but when i deploy it on the server the image won't load. I'm using PM2 to deploy my App on my Ubuntu VPS
You guys can look at the error on https://bappedabjn.id as it look like this
EDIT :
I'm sorry i didn't include detail
Here is where i put the image at static/img/logo.png
And here how i called the image
<nuxt-img src="/img/logo.png" width="100" class="mb-10" />
And lastly here is my nginx.conf for @Lykos94 asking it
proxy_pass http://localhost:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
1 Respuestas
Responde la pregunta0
I tried to create a new NuxtJS project based on your information and added the @nuxt/image and I managed to reproduce your issue. You are currently using the target: 'server' (or none, and it's the default) option in your nuxt.config.js, which requires to have additional configuration for you to use the @nuxt/image module.
In particular you should follow the following guide at this link and add this to your plugins:
import { createIPX, createIPXMiddleware } from "ipx";
// https://github.com/unjs/ipx
const ipx = createIPX({
dir: "static/", // absolute path to images dir
});
export default createIPXMiddleware(ipx);
After following the guide I managed to run the npm run build and run my server in production, displaying correctly the image.