下一个/图像在使用地图时没有加载我的 src 图像

Question

我使用next/image在应用程序中加载图像。除了带有多个图像的旋转木马外，它运行良好。当我喜欢这样的时候，我会出现错误：

错误：缺少所需的图像"；src"；所有物确保你通过了"；src"；支持CCD_ 1组件。收到：｛｝

问题不是因为我有一个没有任何文件的实体

image.js

import { getStrapiMedia } from "../utils/medias"
import NextImage from "next/image"
const Image = (props) => {
if (!props.media) {
return <NextImage {...props} />
}
const { url, alternativeText } = props.media
const loader = ({ src }) => {
return getStrapiMedia(src)
}
return (
<NextImage
loader={loader}
layout="responsive"
objectFit="contain"
width={props.media.width}
height={props.media.height}
src={url}
alt={alternativeText || ""}
/>
)
}
export default Image

Carousel.js

import React, { useCallback } from "react"
import useEmblaCarousel from "embla-carousel-react"
import NextImage from "./Image"
export const EmblaCarousel = (product) => {
const [emblaRef, emblaApi] = useEmblaCarousel()
useEmblaCarousel.globalOptions = { loop: true }
const scrollPrev = useCallback(() => {
if (emblaApi) emblaApi.scrollPrev()
}, [emblaApi])
const scrollNext = useCallback(() => {
if (emblaApi) emblaApi.scrollNext()
}, [emblaApi])
return (
<div className="embla" ref={emblaRef}>
<div className="embla__container">
{product.gallery.map((_gallery) => (
<div key={_gallery.id}>
<NextImage media={_gallery.image} className="embla__slide" />
</div>
))}
</div>
<button
className="hidden md:inline embla__prev mr-2"
onClick={scrollPrev}
>
Prev
</button>
<button
className="hidden md:inline embla__next ml-2"
onClick={scrollNext}
>
Next
</button>
</div>
)
}
export default EmblaCarousel

Answer 1

问题是

if (!props.media) {
return <NextImage {...props} />
}

在自定义图像组件中。当media道具像undefined或null一样是falsy时，您将把其他所有东西都传递给NextImage，但其他所有东西不包括src道具，这对下一个Image组件是强制性的。此外，您的url提取依赖于media道具是truthy并具有名为url的属性。可以从下一行看到：-

next/image0

您打算将这个url传递给src，这可以从您的使用中看出。当media是falsy时，您可以返回null，或者您可以过滤掉列表中media道具是falsy项目，然后映射到它上。

Answer 2

不确定你是否找到了答案，但我遇到了同样的问题，并注意到当从Strapi循环通过多个图像对象时，该对象与单个图像略有不同。

为了解决这个问题，我将其提供给getStrapiMedia()功能，其方式与预期的单个图像相同，即：

{aboutpage?.attributes.shareCta.images.data.slice(0, 4).map((image) => (
<div key={image.id} className="relative h-64 w-full">
<Image
layout="fill"
objectFit="cover"
placeholder="blur"
blurDataURL={blurDataUrl}
src={
getStrapiMedia({ data: image }) ||
"/images/placeholders/image-placeholder.png"
}
/>
</div>
));
}

希望这对有所帮助