PNG and JPEG images not working

[Muhammad Khalid]

I use next-optimized-images with next.js v11.0.1 and also installed imagemin-mozjpeg imagemin-optipng imagemin-svgo. SVG images work fine but when I try for .png or .jpg images, no image will show instead alt attribute text is display. Here's the detail:

Image Size: 13 KB

JSX part :

import MyImage from "../public/images/MyImage.png";

<img src={MyImage} alt="some text" />

next.config.js

module.exports = {
  reactStrictMode: true,
}

// config for next-optimized-images
const withOptimizedImages = require('next-optimized-images')

module.exports = withOptimizedImages({
    handleImages: ['jpeg', 'png', 'svg'],
})

package.json

{
  "name": "dintreuhaender",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build && next export",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.35",
    "@fortawesome/free-brands-svg-icons": "^5.15.3",
    "@fortawesome/free-regular-svg-icons": "^5.15.3",
    "@fortawesome/free-solid-svg-icons": "^5.15.3",
    "@fortawesome/react-fontawesome": "^0.1.14",
    "imagemin-mozjpeg": "^9.0.0",
    "imagemin-optipng": "^8.0.0",
    "imagemin-svgo": "^9.0.0",
    "next": "11.0.1",
    "next-optimized-images": "^2.6.2",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "eslint": "7.29.0",
    "eslint-config-next": "11.0.1"
  }
}

I also tried the solution of this issue

[Muhammad Khalid]

Its work fine when I import images from external website url

[Daniel Wagner]

👍 I have the same issue - images are generated to _next/static/images folder but are broken

[Daniel Wagner]

Actually - i found this option in other thread:

images: {
  disableStaticImages: true,
},

and it helped

[Adjie Indrawan]

Actually - i found this option in other thread:

images: {
  disableStaticImages: true,
},

and it helped

still not work for me.. :(

[Bruno Braga]

did you figure this out? same problem here

[Ephraim Iyanda]

rename the png pictures so they do not contain spaces in their names when using relative paths in the image source