[Hello, I am using Strapi 4.22.0 and I have a problem with the images being called, the rest is shown to me like the names, the thing is that I have searched everywhere to solve the problem but I have not been able to.
- Strapi 4.22.0:
Json of categories
Complete code
"use client";
import "../home.css"
import React, {useEffect, useState} from "react";
import Link from "next/link";
import GlobalApi from "../GlobalApi";
import Footer from "../components/Footer";
import Image from "next/image";
export default function CategoryPage({children}) {
const [categoryList, setCategoryList] = useState([]);
useEffect(() => {
console.log(setCategoryList());
getCategoryList();
}, []);
const getCategoryList = () => {
GlobalApi.getCategory().then((resp) => {
setCategoryList(resp.data.data);
});
};
// const SliderList=await GlobalApi.getSlider();
return (
<main>
{/*navbar of the categories*/}
<nav className="origenes-navbar text-black flex backdrop-filter backdrop-blur-lg lg:justify-center z-10
sticky top-0 width-[100vw] w-full py-1 sm:px-12 px-5 justify-between items-center">
<div className="nav-content">
<div className="nav-logo">Origenes (Category)</div>
<ul className="nav-items">
<li className="max-sm:hidden">
<button disabled>Overview</button>
</li>
<li className="max-sm:hidden"><Link href="/Tienda/Product">
<button className="">Product</button>
</Link></li>
<li className="max-sm:hidden">
<button>Compare</button>
</li>
<li>
<button className="buy-btn">Buy</button>
</li>
</ul>
</div>
</nav>
{/*End Navbar*/}
<section>
<div className="main-elem">
<h1>Category</h1>
</div>
<div className="canvas-elem">
<canvas id="hero-lightpass"></canvas>
</div>
</section>
<section className="section1 rounded-xl">
<div>
<div className="p-4 mx-auto lg:max-w-7xl sm:max-w-full grid">
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 ">
{/* get Category List */}
{categoryList &&
categoryList.map((category, index) => (
<div key={index} className="text-lg text-gray-800 text-center bg-white p-5
transition-all relative rounded-xl overflow-hidden shadow-lg hover:scale-105 duration-500 cursor-pointer">
{/*<img*/}
{/* src="https://teleasistencia.es/storage/redactor/iPtgvHtjOqFSDVygp8Bsj2gtNvPlpu.jpg"/>*/}
{/*<img*/}
{/* src={data.attributes.image.data.attributes.url}/>*/}
<Image
src={category.attributes.image.data[0].attributes.url}
alt={category.attributes.name}
width={500}
height={300}
layout="fill"
objectFit="cover"
/>
<div
className="bg-white w-10 h-10 flex items-center justify-center rounded-full cursor-pointer absolute top-3 right-4">
<svg xmlns="http://www.w3.org/2000/svg" width="18px"
className="fill-gray-800 inline-block" viewBox="0 0 64 64">
<path
d="M45.5 4A18.53 18.53 0 0 0 32 9.86 18.5 18.5 0 0 0 0 22.5C0 40.92 29.71 59 31 59.71a2 2 0 0 0 2.06 0C34.29 59 64 40.92 64 22.5A18.52 18.52 0 0 0 45.5 4ZM32 55.64C26.83 52.34 4 36.92 4 22.5a14.5 14.5 0 0 1 26.36-8.33 2 2 0 0 0 3.27 0A14.5 14.5 0 0 1 60 22.5c0 14.41-22.83 29.83-28 33.14Z"
data-original="#000000"></path>
</svg>
</div>
<h1>{category.attributes.name}</h1>
</div>
))}
</div>
</div>
</div>
</section>
<Footer/>
</main>
)
{children}
}
This is the part of the problem with images.
<section className="section1 rounded-xl">
<div>
<div className="p-4 mx-auto lg:max-w-7xl sm:max-w-full grid">
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 ">
{/* get Category List */}
{categoryList &&
categoryList.map((category, index) => (
<div key={index} className="text-lg text-gray-800 text-center bg-white p-5
transition-all relative rounded-xl overflow-hidden shadow-lg hover:scale-105 duration-500 cursor-pointer">
{/*<img*/}
{/* src={data.attributes.image.data.attributes.url}/>*/}
<Image
src={category.attributes.image.data[0].attributes.url}
alt={category.attributes.name}
width={500}
height={300}
layout="fill"
objectFit="cover"
/>
<div
className="bg-white w-10 h-10 flex items-center justify-center rounded-full cursor-pointer absolute top-3 right-4">
<svg xmlns="http://www.w3.org/2000/svg" width="18px"
className="fill-gray-800 inline-block" viewBox="0 0 64 64">
<path
d="M45.5 4A18.53 18.53 0 0 0 32 9.86 18.5 18.5 0 0 0 0 22.5C0 40.92 29.71 59 31 59.71a2 2 0 0 0 2.06 0C34.29 59 64 40.92 64 22.5A18.52 18.52 0 0 0 45.5 4ZM32 55.64C26.83 52.34 4 36.92 4 22.5a14.5 14.5 0 0 1 26.36-8.33 2 2 0 0 0 3.27 0A14.5 14.5 0 0 1 60 22.5c0 14.41-22.83 29.83-28 33.14Z"
data-original="#000000"></path>
</svg>
</div>
<h1>{category.attributes.name}</h1>
</div>
))}
</div>
</div>
</div>
</section>