next.js 为什么下一个js图像优化器在远程图像url之前添加域路径?

dauxcl2d  于 2023-05-06  发布在  其他
关注(0)|答案(1)|浏览(129)

在我的应用程序中,我像这样使用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。

tquggr8v

tquggr8v1#

问题出在你的远程url中,url中缺少一个斜杠,下一个是将其识别为URL子目录:
https:/www...应为https://...

相关问题