使用 NextJS 在 Reactjs 中导入 jpg 图像 some images import return long string

import jpg image in Reactjs with NextJS some images import return long string

我正在导入不同比例的图像并在我的 React 应用程序中显示它们

部分图片导入正确, 但有些会得到非常长且“奇怪”的字符串名称,而不是它们的常规文件名

例如

import generator from '../images/generators/generator-rental.jpg';
import generatorw205 from '../images/generators/generator-rental@0,4x.jpg'; 
import generatorw384 from '../images/generators/generator-rental@0,75x.jpg'; 

当我将它们中的 3 个放在一起时 srcSet 最小的图像得到长字符串。

generatorw205 和 generatorw384 已正确导入并与此 src 一起显示 属性:

"/_next/static/images/generator-rental-9f9671c1ae14a9abd201cce092b95c0d.jpg 512w"

/_next/static/images/generator-rental@0,75x-0ff42525965adeb23850ef8dacd34c50.jpg 384w,

但是第一张图片得到这个字符串:

data:image/jpeg;base64,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 205w,

这是我的 next.config.js 文件:

const withImages = require('next-images')
const withPlugins = require("next-compose-plugins");
const optimizedImages = require("next-optimized-images");
const withBundleAnalyzer = require('@next/bundle-analyzer')({
    enabled: process.env.ANALYZE === 'true'
  })

module.exports = withPlugins(
    [
        [optimizedImages, {

        }],
        [withBundleAnalyzer, {
            
        }]
    ]
);

更新

对于下一次优化图像。该插件具有类似的配置 - https://github.com/cyrilwanner/next-optimized-images#inline

module.exports = withPlugins(
    [
        [optimizedImages, {
           inlineImageLimit:4096
        }],
        [withBundleAnalyzer, {
            
        }]
    ]
);

some images are import correctly, but some get really long and "strange" string name instead of their regular file name

strange 字符串名称是 base64 表示,可以提供给数据 url 通过使用此技术,您可以避免额外的 http 下载来自服务器。