我使用 next-optimized-images 和 next.js v11.0.1 并且还安装了imagemin-mozjpeg imagemin-optipng imagemin-svgo
. SVG 图像工作正常,但是当我尝试使用 .png 或 .jpg 图像时,不会显示任何图像,而是显示 alt 属性文本或损坏的图像。这是详细信息:
图片大小:13 KB
JSX 部分
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,
});
包.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"
}
}
检查零件
<img alt="symbol" src="data:image/png;base64,ZXhwb3J0IGRlZmF1bHQgIHsic3JjIjoiL19uZXh0L3N0YXRpYy9pbWFnZS9wdWJsaWMvaW1hZ2VzL3NoYXJlLjNhMTRlOTc0MTBiY2Q5YWM2ZDY2YTNhNDlmMzMxNTM1LnBuZyIsImhlaWdodCI6NTEyLCJ3aWR0aCI6NTEyLCJibHVyRGF0YVVSTCI6ImRhdGE6aW1hZ2UvcG5nO2Jhc2U2NCxpVkJPUncwS0dnb0FBQUFOU1VoRVVnQUFBQWdBQUFBSUNBWUFBQURFRDc2TEFBQUExVWxFUVZSNDJtTUFBWm01L3hqbFp2MWpCckdaOXZ3TFlqajdqd1BFbGxqeWo1VkJlZG8vSmdZbzRGN3pqNU43MDc5YnZCditYZVZkKzArSkFRYkVGdjRUbGx6d2I3SDRvbjl2SlJiKyt5VysrTjkvSVBzWDBPUmFCdFVKL3dSVkp2KzdEc1QvVlNmOSt3K2svNEJvRUZhYy9tOFdnMEhMdjRWQS9CK0l0K2wwL1BNemJQNzNHTWorb052K3o0WUJCR3hLLy8yM0x2dlh4UUFGVmhYLzBteEsva21BMkJvVC83RXdlS1Q5TzhJQUJZWXQvMWhoYlAzMmY4d01JQkFjK2M4TVJIdWwvMk1DMGVZMS81ak5hdjh4d2hRQ0FMOWNZS0dDWVdZdEFBQUFBRWxGVGtTdVFtQ0MifTs=">
当我从外部网站 url 导入图像时它工作正常