reactjs - 图像不会出现在 Nextjs 和 Strapi 项目中
问题描述
目前我使用 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},
}
}
解决方案
使用 console.log(post) 并在浏览器控制台中找到您的帖子返回的内容。如果它提供缩略图,则使用它。否则使用它提供的内容。
推荐阅读
- css - 铬`位置:固定; bottom: 0;` 被 Android UI 遮挡
- sql - 在 SQL 中使用偏移量来计算列或总和在 postgresql 中为空
- php - 来自相关模块的 Vtiger 更新字段值
- python - 在我的 Qt C++ 应用程序中使用 Anaconda 的 Python
- angular - 未捕获(承诺):事件:{\"isTrusted\":true}
- css - 使用 webpack 合并 CSS 和 Less
- system-verilog - Systemverilog 交叉覆盖点语法问题
- javascript - 使用 JavaScript 获取多个选择值并以特定格式显示结果
- sybase - 在现有表中加载文件
- javascript - 如何使用javascript动态添加第一类名称