Next.js Discord

Discord Forum

Issue is clicking in image

Answered
Asian swamp eel posted this in #help-forum
Open in Discord
Asian swamp eelOP
while trying to click the image the link not working or any error showing in link nor link opening ? i try toa sk chatgpt but isnt get helpful answer ?

import { DUMMY_NEWS } from "@/dummy-news";
import Link from "next/link";
import { notFound } from "next/navigation";

function Imagepage({ params }) {
  const newsItemSlug = params.slug;
  const newsItem = DUMMY_NEWS.find((news) => news.slug === newsItemSlug);

  if (!newsItem) {
    notFound();
  }

  return (
    <div className="fullscreen-image">
      {/* Ensure the href matches your routing */}
      <Link href={`/news/${newsItem.slug}/image`}>
          <img src={`/images/news/${newsItem.image}`} alt={newsItem.title} />
      </Link>
    </div>
  );
}

export default Imagepage;
Answered by James4u
and you have images which are links to the detail page
View full answer

39 Replies

James4u
When you hover the image you should see the link href in the bottom left
do you see it?
Asian swamp eelOP
no mouse isnt showing hover ?
James4u
then open browser inspect and try to point that element
something might be overlapping on your image
Asian swamp eelOP
James4u
is it a link? plz try open browser inspect
btw in the detail page, why should image a link?
Asian swamp eelOP
i am learning next.js from udemy course academind ...
James4u
@Asian swamp eel Open your browser inspect and point your image element
press F12
Asian swamp eelOP
James4u
as you can see it's not a link
just a normal image tag
Asian swamp eelOP
no link is detecting ?
James4u
show me your code for this detail page
Asian swamp eelOP
import { DUMMY_NEWS } from "@/dummy-news";
import { notFound } from "next/navigation";

function NewsDetailedPage({ params }) {
  const newsSlug = params.slug;
  const newsItem = DUMMY_NEWS.find((news) => news.slug === newsSlug);
  if (!newsItem) {
    notFound();
  }
  return (
    <article className="news-article">
      <header>
        <img src={`/images/news/${newsItem.image}`} alt={newsItem.title} />
        <h1>{newsItem.title}</h1>
        <time dateTime={newsItem.date}>{newsItem.date}</time>
      </header>
      <p>{newsItem.content}</p>
    </article>
  );
}

export default NewsDetailedPage;
James4u
yeah, so no link tag is here
why do you expect a link???
Asian swamp eelOP
its form video ?
and this from Detailed page ?
Asian black bear
what should be expected when click the image on details page ?
currently your code is just to display the detail.
@Asian swamp eel and this from Detailed page ?
James4u
@Asian swamp eel
in the video it's only showing the image not a link
you should be clear what to do
Asian swamp eelOP
its need to configure to detail page too ,...
i dont configure on detailed page !!!
thanks for help buddy 😄
James4u
@Asian swamp eel you want to make the image a link in the detail page as well?
Asian swamp eelOP
yes i dont understand video in full ... so its lead confused me and again i start watch i find its need to link in parent page to able to see image
James4u
normally it's like in the home page, you have a list of blogs/news
James4u
and you have images which are links to the detail page
Answer
James4u
but in the detail page they normally have an image
no need to make that image a link
Asian swamp eelOP
yeah for learning purpose i go through all since lot of browser have open image in new tab ... so i dont need to make link for learning purpose i go to all !!!
James4u
if you are clear now, close this thread by marking solution
Original message was deleted
James4u
@Asian swamp eel
Original message was deleted
Asian swamp eelOP
i couldnt delte this upper :/
!closed