0

Even Though I've replaced older image with new one (but with same name) in directory, it's not showing changes and still shows older image even though it doesn't exist in directory(folder) anymore.

const postData: DataType[] = [
    {
        name: "Robert Fox",
        profession: 'CEO, Parkview Int.Ltd',
        comment: 'There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour',
        imgSrc: '/testimonial/user1.png',
    },
    {
        name: "Leslie Alexander",
        profession: 'CEO, Parkview Int.Ltd',
        comment: 'There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour',
        imgSrc: '/testimonial/user2.jpg',
    },
    {
        name: "Cody Fisher",
        profession: 'CEO, Parkview Int.Ltd',
        comment: 'There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour',
        imgSrc: '/testimonial/user3.jpeg',
    },
    {
        name: "Robert Fox",
        profession: 'CEO, Parkview Int.Ltd',
        comment: 'There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour',
        imgSrc: '/testimonial/user4.jpg',
    },
    {
        name: "Leslie Alexander",
        profession: 'CEO, Parkview Int.Ltd',
        comment: 'There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour',
        imgSrc: '/testimonial/user5.jpg',
    },
    {
        name: "Cody Fisher",
        profession: 'CEO, Parkview Int.Ltd',
        comment: 'There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour',
        imgSrc: '/testimonial/user6.jpg',
    },
]                    
<Slider className={`${styles['slick-slide']}`} {...settings}>
                        {postData.map((items, i) => (
                            <div key={i} className="relative">
                                <div className={`${styles["testimonial"]} test-sha m-3 p-10 mt-20 mb-5 rounded-3xl ${styles["test-sha"]}`}>
                                    <Image src={items.imgSrc} alt={items.imgSrc} width={75} height={75} className={`inline-block m-auto absolute ${styles['test-image']} ${styles['test-pos']}`} />
                                    <h4 className={`text-base font-medium ${styles['text-testColor']} my-4`}>{items.comment}</h4>
                                    <hr style={{ color: "lightgrey" }} />
                                    <div className="flex justify-between">
                                        <div>
                                            <h3 className='text-base text-ada-blue font-medium pt-4 pb-2'>{items.name}</h3>
                                            <h3 className='text-xs font-medium  pb-2 opacity-50'>{items.profession}</h3>
                                        </div>
                                        <div className="flex text-ada-blue">
                                            <StarIcon width={20} className="star" />
                                            <StarIcon width={20} className="star" />
                                            <StarIcon width={20} className="star" />
                                            <StarIcon width={20} className="star" />
                                            <StarIcon width={20} className="star" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </Slider>

I tried Refresh, hard Refresh (Ctrl + shift + R on windows), completely replaced older pic with new but nothing works. and it still shows older image not the one that currently exists. What Could be the reason?

  • 2
    Assuming you are running locally, delete the .next folder and restart. Might be cached in there. – grekier Jul 13 '23 at 07:03
  • Because by default Next js Image component caches the image. You can delete that in the /cache/images Or you can configure the `minimumCacheTTL` low in your next.config.js. For example 5 seconds. – sajan Jul 13 '23 at 07:03
  • @grekier @ sajan Thanks Guys, it helped. – gulshan _____ Jul 14 '23 at 07:55

0 Answers0