Why can't the browser display images correctly?Display 500 (Internal Server Error)

[myskylq]

Hi, I followed the official documentation step by step.But the image cannot be displayed using <NuxtImg>

1. package.json

"devDependencies": {
    "@nuxt/devtools": "latest",
    "nuxt": "^3.7.4",
    "vue": "^3.3.4",
    "vue-router": "^4.2.5"
  },
  "dependencies": {
    "@nuxt/image": "1.0.0-rc.3",
  }

2.nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ['@nuxt/image'],
})

3.Put an image(1.jpg) into the "/public/images" directory

4.Use <NuxtImg> in the page

<template>
    <div>
        <NuxtImg src="/images/1.jpg" />
        <img src="/images/1.jpg" alt="" srcset="">
    </div>
</template>

5.After starting the project, the picture cannot be displayed

can be displayed，The console reports an error:GET http://localhost:3001/ipx//images/1.jpg 500 (Internal Server Error)，Is that why? Did I configure it incorrectly?

[yk-sgr]

Edge Channel works for me

[github-actions[bot]]

Would you be able to provide a reproduction? 🙏

More info

Why do I need to provide a reproduction?

Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making.

What will happen?

If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritise it based on its severity and how many people we think it might affect.

If needs reproduction labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), we'll close them. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it.

How can I create a reproduction?

We have a template for starting with a minimal reproduction:

👉 https://stackblitz.com/github/nuxt/image/tree/main/example

A public GitHub repository is also perfect. 👌

Please ensure that the reproduction is as minimal as possible. See more details in our guide.

You might also find these other articles interesting and/or helpful:

• The Importance of Reproductions
• How to Generate a Minimal, Complete, and Verifiable Example

[myskylq]

I reinstalled Nuxt 3.8 and the Images module, but encountered an error during installation:

"node_modules/.pnpm/[email protected]/node_modules/sharp: Running install script, failed in 19.8s (skipped as optional)".

After installation, I added a picture using <NuxtImg>, but an error occurred in the browser console:

"[500] [IPX_ERROR] Something went wrong installing the "sharp" module Cannot find module '../build/Release/sharp-win32-x64.node' Require stack:

• E:\CodeExec\testPro\test-nuxt3.8-01\node_modules.pnpm\[email protected]\node_modules\sharp\lib\sharp.js
• E:\CodeExec\testPro\test-nuxt3.8-01\node_modules.pnpm\[email protected]\node_modules\sharp\lib\constructor.js
• E:\CodeExec\testPro\test-nuxt3.8-01\node_modules.pnpm\[email protected]\node_modules\sharp\lib\index.js
• Possible solutions:
• Install with verbose logging and look for errors: "npm install --ignore-scripts=false --foreground-scripts --verbose sharp"
• Install for the current win32-x64 runtime: "npm install --platform=win32 --arch=x64 sharp"
• Consult the installation documentation: https://sharp.pixelplumbing.com/install"

Why did the installation go wrong?What should I do?

[Thevetat]

@myskylq Opting in to the edge channel fixed it for me. I had the same errors as you.

https://image.nuxt.com/get-started/installation#opting-into-the-edge-channel

[asteof]

So I stubled across the same problem and created small repo for reprodution purposes. In my case npm installation worked fine, but yarn did not, the error persists GET http://localhost:3001/ipx//images/1.jpg 500 (Internal Server Error)

And what I've found is that there is no _ipx forder in sources tab of browser devtools. Hope to see some comments on this issue.

[roadtosixx]

Same problem, strange on my PC everything works, but on my Laptop ( nuxt dev mode ) the picture does not load.

Same error as @myskylq

[sraff]

Same issue fixed enabling the inject into nuxt.config.ts:

export default defineNuxtConfig({
  image: {
    inject: true
  },
  modules: ['@nuxt/image'],
})

[aerophobic]

Using @nuxt/[email protected].

I had a similar issue getting 500 errros loading images with default provider ipx. looking into the actual response of the server route it stated:

"[500] [IPX_ERROR] Could not load the \"sharp\" module using the linux-x64 runtime
Possible solutions:
- Ensure optional dependencies can be installed:
    npm install --include=optional sharp
    yarn add sharp --ignore-engines
- Ensure your package manager supports multi-platform installation:
    See https://sharp.pixelplumbing.com/install#cross-platform
- Add platform-specific dependencies:
    npm install --os=linux --cpu=x64 sharp
- Consult the installation documentation:
    See https://sharp.pixelplumbing.com/install"

So it turned out the platform specific sharp library was not installed. I removed the @nuxt/image package and readded it with:

yarn add @nuxt/image --ignore-engines

Everything worked well then. Maybe this helps someone struggling with the same issue.

[Gonzalo-Bruna]

so I had the same issue, but solved it by removing the pnpm-lock file and then running the pnpm install command. (I am using pnpm as my package manager). It definitely had to do with the sharp package since this is what it showed:

Downloading registry.npmjs.org/@img/sharp-win32-x64/0.33.2: 8.15 MB/8.15 MB, done
Packages: +6
++++++
Progress: resolved 1182, reused 1088, downloaded 8, added 6, done
node_modules/.pnpm/[email protected]/node_modules/sharp: Running install script, done in 78ms

[danielroe]

It looks like this is an issue with sharp which should be resolved in the latest release. Closing for now, but please feel free to open a new issue with a reproduction if you still encounter this.