在我的应用程序中,我像这样使用https://www.npmjs.com/package/next-image-export-optimizer库中的ExportedImage。
import ExportedImage from 'next-image-export-optimizer'
<ExportedImage src={media?.original_url} fill sizes="100vw" alt={title} placeholder="em>
media.original_url is equal to 'https://s3.eu-west-2.amazonaws.com/getnarval-test/domains/9909f63c-9b13-48a9-9d2d-ea01a7b37c95/1/person.jpg'
当应用程序打开图像正确显示,但我在控制台中有一个错误:
有什么想法,为什么下一步是添加域名之前真正的网址?
我的下一个.config文件:
/** @type {import('next').NextConfig} */
const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: true,
openAnalyzer: true
})
const nextConfig = {
reactStrictMode: true,
compiler: {
styledComponents: true
},
images: {
loader: 'custom',
imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
remotePatterns: [
{
protocol: 'https',
hostname: '*.amazonaws.com',
pathname: '**'
},
{
protocol: 'https',
hostname: 'eu.ui-avatars.com',
pathname: '**'
}
]
},
env: {
nextImageExportOptimizer_imageFolderPath: 'public/img',
nextImageExportOptimizer_exportFolderPath: 'out',
nextImageExportOptimizer_quality: 75,
nextImageExportOptimizer_storePicturesInWEBP: true,
// If you do not want to use blurry placeholder images, then you can set
// nextImageExportOptimizer_generateAndUseBlurImages to false and pass
// `placeholder="empty"` to all <ExportedImage> components.
//
// If nextImageExportOptimizer_generateAndUseBlurImages is false and you
// forget to set `placeholder="empty"`, you'll see 404 errors for the missing
// placeholder images in the console.
nextImageExportOptimizer_generateAndUseBlurImages: true
},
trailingSlash: true
}
module.exports = nextConfig
我发现当我把url像这样:src="//s3.eu-west-2.amazonaws.com/getnarval-test/domains/9909f63c-9b13-48a9-9d2d-ea01a7b37c95/1/person.jpg"
因此,没有任何http或https在beginning它看起来更好,因为不是caontain主机名,但下一个对待是作为http。我需要找到一种方法来Map//到https。
1条答案
按热度按时间tquggr8v1#
问题出在你的远程url中,url中缺少一个斜杠,下一个是将其识别为URL子目录:
https:/www...
应为https://...