nuxt-img and js files cannot loaded on production mode on server

user_10835399 0
Viewed 625

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 enter image description here

EDIT :

I'm sorry i didn't include detail

Here is where i put the image at static/img/logo.png

enter image description here

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;
nuxt.js deployment javascript
1 Answers

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.

user_67073910
Related