So I am using the SwiperSlide for the first time and after reading the docs and following, I got to the part where i needed it to work and display my images but for some reasons not known to me, my images aren’t displaying. Here is my code;
import React from 'react'
import './residencies.css'
// core version + navigation, pagination modules:
import {Swiper, SwiperSlide } from 'swiper/react';
// import Swiper and modules styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import data from '../../utils/slider.json'
function Residencies() {
return (
<div className='r-wrapper'>
<div className='r-container paddings innerWidth'>
<div className='r-head flexColStart'>
<span className='orangeText'>Best Choices</span>
<span className='primaryText'>Popular Residencies</span>
</div>
<Swiper>
{
data.map ((card, i) => (
<SwiperSlide key={i}>
<div className='r-card'>
<img src={card.image}alt="" />
<span className='secondaryText r-price'>
<span>$</span>
<span>{card.price}</span>
</span>
</div>
</SwiperSlide>
)
)}
</Swiper>
</div>
</div>
)
}
export default Residencies
And here is my data files;
[
{
"name": "Aliva Priva Jardin",
"price": "47,043",
"detail": "Jakarta Garden City Street, Cakung. Pulo Gadung, Jakarta Timur, DKI Jakarta",
"image": "/assets/r1.png"
},
{
"name": "Asatti Garden City",
"price": "66,353",
"detail": "Pahlawan Street XVII No.215, Cinangka, Sawangan, Depok, Jawa Barat",
"image": "/assets/r2.png"
},
{
"name": "Citralan Puri Serang",
"price": "35,853",
"detail": "Ruko Puri Indah Residence Block A7, Lingkar Street, Ciracas, Serang, Banten",
"image": "/assets/r3.png"
},
{
"name": "Aliva Priva Jardin",
"price": "47,043",
"detail": "Jakarta Garden City Street, Cakung. Pulo Gadung, Jakarta Timur, DKI Jakarta",
"image": "/assets/r1.png"
},
{
"name": "Asatti Garden City",
"price": "66,353",
"detail": "Pahlawan Street XVII No.215, Cinangka, Sawangan, Depok, Jawa Barat",
"image": "/assets/r2.png"
},
{
"name": "Citralan Puri Serang",
"price": "35,853",
"detail": "Ruko Puri Indah Residence Block A7, Lingkar Street, Ciracas, Serang, Banten",
"image": "/assets/r3.png"
}
]
I have tried every possible ways to make sure my image path is correct, I even had to change the image path to traditional way but it wont display still but if i type it outside the SwiperSlide tag It will display. What could be the reasons why it’s not showing??
Just the thumbnail is showing, the actual image wont show
