如何启用NextJS“下一个/未来/图像”？
我正在尝试使用Next.js next/future/image实验组件。
我将package.json中的package.json版本升级为"next": "^12.2.0"。
这是我的next.config.js文件：
/** @type {import('next').NextConfig} */
const nextConfig = {
strictMode: true,
experimental: {
images: {
allowFutureImage: true,
},
},
images: {
domains: ['firebasestorage.googleapis.com',],
},
};
module.exports = nextConfig;它不允许我使用这个特性。以下是浏览器控制台中的错误消息：
Error: The "next/future/image" component is experimental and may be subject to breaking changes. To enable this experiment, please include `experimental: { images: { allowFutureImage: true } }` in your next.config.js file.
回答 3
Stack Overflow用户
发布于 2022-10-06 05:49:19
下一个v13用户的v13：
我认为next/future/image现在是默认的Image组件。所以不需要额外的工作！只需导入和使用
import Image from 'next/image'用于下一个v12.3用户(类似于本问题的作者)
您不需要在配置中添加任何内容就可以使用future/image。未来的形象现在是稳定的。只需通过导入直接使用
import Image from 'next/future/image'实际上，向配置添加images属性将导致错误，因为配置模式已经更新。所以不要那样做，。
// next.config.js
module.exports = {
experimental: {
images: { // This will cause an error
allowFutureImage: true,
},
},
}Stack Overflow用户
发布于 2022-07-03 08:05:35
对我起作用的解决方案是添加实验规则并停止nextjs服务器并重新启动它。然后它就开始工作了
module.exports = {
experimental: {
images: {
allowFutureImage: true,
},
},
}Stack Overflow用户
发布于 2022-11-14 00:49:36
我目前正在使用NextJS 12.3.1版本，如果我在next.config.js中启用它，那么在终端上就会收到一个难看的警告。因此，最好只是import Image from "next/future/image"，而不是添加配置，以避免警告。希望其他使用12.3.1的人发现这是有用的(使用未来/映像可以摆脱讨厌的包装器div/span)
我看到配置到位时出现的警告：
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
warn - Invalid next.config.js options detected:
- The value at .experimental has an unexpected property, images, which is not in the list of allowed properties (adjustFontFallbacks, amp, appDir, browsersListForSwc, cpus, craCompat, disableOptimizedLoading, disablePostcssPresetEnv, esmExternals, externalDir, fallbackNodePolyfills, forceSwcTransforms, fullySpecified, gzipSize, incrementalCacheHandlerPath, isrFlushToDisk, isrMemoryCacheSize, largePageDataBytes, legacyBrowsers, manualClientBasePath, modularizeImports, newNextLinkBehavior, nextScriptWorkers, optimizeCss, optimisticClientCache, outputFileTracingRoot, pageEnv, profiling, proxyTimeout, runtime, scrollRestoration, serverComponents, sharedPool, sri, swcFileReading, swcMinify, swcMinifyDebugOptions, swcPlugins, swcTraceProfiling, urlImports, workerThreads).
See more info here: https://nextjs.org/docs/messages/invalid-next-config
warn - You have enabled experimental feature (images) in next.config.js.
warn - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.https://stackoverflow.com/questions/72821223
复制相似问题
腾讯云开发者
