图像不会出现在 Nextjs 和 Strapi 项目中

Posted 2023-03-06

【中文标题】图像不会出现在 Nextjs 和 Strapi 项目中

【英文标题】：Images wont show up in Nextjs and Strapi project

【发布时间】：2021-10-18 06:42:18

【问题描述】：

目前，我使用 NextJs 作为我的前端，并使用 Strapi 作为我的 Web 应用程序的 CMS。我已在 Strapi 中将以下数据添加到我的 Citizenship 集合类型中：

这是我在 NextJs 端的代码：

export default function Citizenship( posts ) 
  return (
    <>
    <div style=textAlign:"center", marginTop:"20px", fontSize:"25px", color:"#0E2043", fontWeight: "500">CITIZENSHIP</div>

        <div class="flexbox-container" style=margin:"70px", marginTop:"0px">
        
          posts &&
          posts.map((post) => (
            <div style= padding: "40px" >
          <div class="citizen-item" key=post.id>
            <div className="container6">
              <img
                style= height: "50%", width: "100%" 
                src=post.Thumbnail.name
              />
              <div style=textAlign:"center", color:"#E3AB50", padding:"10px", fontSize:"20px">post.Title</div>
              <div style=textAlign:"center", color:"#000", padding:"10px", fontSize:"15px">Access to post.Countries countries</div>
              <div style=display:"flex", justifyContent:"center", paddingTop:"20px", paddingBottom:"10px">
              <button class="findButton">FIND OUT MORE</button>
              </div>
            </div>
          </div>
        </div>        
        ))
        </div>
    </>
  )


export async function getStaticProps() 
  const res = await fetch('http://localhost:1337/citizenships');
  const posts = await res.json();
  
  return 
    props: posts,
  

在我的输出中，除了只显示我的第一张图像并且所有其他图像都给出 404 的图像之外，一切都很好。我该如何解决这个问题？

【问题讨论】：

post.Thumbnail 返回什么？它是有效的图像 URL 吗？您还可以检查开发工具中的“网络”选项卡，了解图像请求失败的原因。

@juliomalves 嘿，所以我尝试检查我的网络选项卡，现在我的所有图像都得到了 404，但第一个除外

404 图像的 URL 是什么样的？它们是有效的网址吗？

是的，所以对于我的第一张图片请求 URL，我得到了 localhost:3000/countries1.png，它工作正常。对于我的第二张图片，我得到了localhost:3000/countries2.png，但那显示的是 404

【参考方案1】：

使用 console.log(post) 并在浏览器控制台中找到您的帖子返回的内容。如果它提供缩略图，则使用它。或者使用它提供的内容。

【讨论】：

嘿，我使用了 console.log 并将 post.Thumbnail 更改为 post.Thumbnail.name，但现在只显示第一张图片

可以查看是否有post.Thumbnail.image

缩略图： id：2，名称：'michael-marangoni-3f.jpg'，alternativeText：''，标题：''，宽度：1920，高度：1080，格式：缩略图： [对象]，大：[对象]，中：[对象]，小：[对象]，哈希：'michael_marangoni_3f_f879a90f93'，ext：'.jpg'，mime：'image/jpeg'，url：'/uploads/ michael_marangoni_3f_f879a90f93.jpg', previewUrl: null, provider: 'local', provider_metadata: null, created_at: '2021-08-16T07:04:17.247Z', updated_at: '2021-08-16T07:04:17.267Z'

因此您使用 post.Thumbnail.url

Make it .url 再次删除了所有图像。我在某个可以使用 next/Image 的地方阅读，但我如何在这里使用它？