求助：如何在NextJS中从Strapi V4 API获取图片URL？

你的代码里存在几个关键错误，直接导致图片加载失败： #

• Strapi V4图片URL拼接错误：你在图片路径前加了/api/，但Strapi返回的媒体文件URL本身就是/uploads/xxx.jpg格式，直接拼接Strapi的基础地址（比如http://localhost:1337）即可，不需要额外加/api/。
• 媒体字段访问路径错误：Strapi V4的媒体字段返回结构是嵌套的，单图的正确访问路径应该是post.thumbnail.data.attributes.formats.thumbnail.url，你写的post.thumbnail.thumbnail[1]完全不符合Strapi的返回结构。
• useEffect位置错误：你把useEffect放在了自定义hook外面，这违反了React Hook的规则，必须放在hook内部。
• 冗余的?populate=*参数：这个参数是用来请求Strapi API时获取关联数据的，放在图片URL后面毫无意义，只会导致路径无效。

修正后的完整代码： #

import { useState, useEffect } from 'react';
import LazyLoad from 'react-lazyload';
import { baseUrl } from '~/repositories/Repository'; // 假设baseUrl是http://localhost:1337

export default function useCustomPost(post) {
    const [thumbnail, setThumbnail] = useState(null);

    useEffect(() => {
        if (post?.thumbnail?.data) {
            // 拼接正确的图片URL
            const thumbnailUrl = `${baseUrl}${post.thumbnail.data.attributes.formats.thumbnail.url}`;
            const thumbnailImage = (
                <LazyLoad>
                    <img src={thumbnailUrl} alt="文章缩略图" />
                </LazyLoad>
            );
            setThumbnail(thumbnailImage);
        } else {
            setThumbnail(null); // 没有图片时置空
        }
    }, [post]);

    return { thumbnail };
}

额外说明： #

1. 如果你的post.thumbnail是多图字段（数组类型），那么访问路径应该是post.thumbnail.data[0].attributes.formats.thumbnail.url（取第一张图），根据你的实际字段类型调整。
2. 确保请求Strapi API时已经带上了?populate=thumbnail或者?populate=*，否则post.thumbnail会是空的，这是Strapi V4默认不返回关联媒体数据的特性。

内容的提问来源于stack exchange，提问作者chinedu-01