5

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 or broken image 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

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

module.exports = withOptimizedImages({
  handleImages: ["jpeg", "png", "svg", "gif", "ico"],
  optimizeImagesInDev: true,
});

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",
    "image-trace-loader": "^1.0.2",
    "imagemin-gifsicle": "^7.0.0",
    "imagemin-mozjpeg": "^9.0.0",
    "imagemin-optipng": "^8.0.0",
    "imagemin-svgo": "^9.0.0",
    "jimp": "^0.16.1",
    "lqip-loader": "^2.2.1",
    "next": "11.0.1",
    "next-optimized-images": "^2.6.2",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "responsive-loader": "^2.3.0",
    "svg-sprite-loader": "^6.0.9",
    "webp-loader": "^0.6.0"
  },
  "devDependencies": {
    "eslint": "7.29.0",
    "eslint-config-next": "11.0.1"
  }
}

Inspect part

<img alt="symbol" src="data:image/png;base64,ZXhwb3J0IGRlZmF1bHQgIHsic3JjIjoiL19uZXh0L3N0YXRpYy9pbWFnZS9wdWJsaWMvaW1hZ2VzL3NoYXJlLjNhMTRlOTc0MTBiY2Q5YWM2ZDY2YTNhNDlmMzMxNTM1LnBuZyIsImhlaWdodCI6NTEyLCJ3aWR0aCI6NTEyLCJibHVyRGF0YVVSTCI6ImRhdGE6aW1hZ2UvcG5nO2Jhc2U2NCxpVkJPUncwS0dnb0FBQUFOU1VoRVVnQUFBQWdBQUFBSUNBWUFBQURFRDc2TEFBQUExVWxFUVZSNDJtTUFBWm01L3hqbFp2MWpCckdaOXZ3TFlqajdqd1BFbGxqeWo1VkJlZG8vSmdZbzRGN3pqNU43MDc5YnZCditYZVZkKzArSkFRYkVGdjRUbGx6d2I3SDRvbjl2SlJiKyt5VysrTjkvSVBzWDBPUmFCdFVKL3dSVkp2KzdEc1QvVlNmOSt3K2svNEJvRUZhYy9tOFdnMEhMdjRWQS9CK0l0K2wwL1BNemJQNzNHTWorb052K3o0WUJCR3hLLy8yM0x2dlh4UUFGVmhYLzBteEsva21BMkJvVC83RXdlS1Q5TzhJQUJZWXQvMWhoYlAzMmY4d01JQkFjK2M4TVJIdWwvMk1DMGVZMS81ak5hdjh4d2hRQ0FMOWNZS0dDWVdZdEFBQUFBRWxGVGtTdVFtQ0MifTs=">

Its work fine when I import images from external website url

  • do you use imports from /public, or external urls? – Nikita Mazur Jul 06 '21 at 12:07
  • I use imports form /public – Muhammad Khalid Jul 06 '21 at 13:54
  • Does this answer your question: [Nextjs: Unable to load images from static folder](https://stackoverflow.com/questions/49435368/nextjs-unable-to-load-images-from-static-folder)? Since you're using images that live under your `public` folder you can simply reference them directly in your `` as `some text`. No need for `next-optimized-images` or extra loaders. – juliomalves Jul 09 '21 at 19:04

0 Answers0