Next.js Discord

Discord Forum

Text inside an Image is not clickable in a <Link> tag

Answered
Akita posted this in #help-forum
Open in Discord
AkitaOP
I have tried to wrap the Image tag inside <a> as well as <div> tag but none seems to work. I was not able to find a solution elsewhere so posting it here.
Answered by Akita
The issue has been resolved by just update the browser. Thanks a lot.
View full answer

25 Replies

AkitaOP
The button is not clickable when the cursor is on the text
@Ray you want the text of image to be clickable?
AkitaOP
Yes. Indeed I want the whole button to be clickable
@Akita The button is not clickable when the cursor is on the text
Ray
could you show the code
AkitaOP
@Akita Click to see attachment
Ray
could you paste the code here
so I can copy and edit
AkitaOP
<Link legacyBehavior passHref href='/dashboard'>
<a>
<div style={{ display: 'block' }}>
<Image
src="/group-5.svg"
width={500}
height={500}
alt=''
style={{
position: "absolute",
height: "100%",
width: "100%",
top: "0%",
right: "0%",
bottom: "0%",
left: "0%",
maxWidth: "100%",
maxHeight: "100%",
}}
/>
</div>
</a>
</Link>
Ray
are you using tailwind or not?
AkitaOP
Not. I am using inline styled css components
@Akita Not. I am using inline styled css components
Ray
 <Link
        href="/dashboard"
        style={{
          display: "block",
          position: "relative",
          width: 240,
          height: 60,
        }}
      >
        <Image src="/group-5.svg" fill alt="" sizes="100vw" />
      </Link>
adjust the width and height as you need
Ray
can you send me the image
AkitaOP
@Ray can you send me the image
AkitaOP
I have attached a video showcasing the issue still persists after making the updates
@Ray coulld you send me the svg?
AkitaOP
I have attached the svg that I am using. I have tried with other images as well with different file formats but the issue seems to persist
what browser are you using?
@Ray Click to see attachment
AkitaOP
I am using Google Chrome browser. That was helpful. I sincerely appreciate your efforts. Thanks a lot. Now I know where to look.
AkitaOP
The issue has been resolved by just update the browser. Thanks a lot.
Answer
ok