Am I an idiot or do I not understand <Image />
Answered
Tan posted this in #help-forum
TanOP
const LinkUser = async ({ username }) => {
let userProfile = await getProfile(username);
let profilePicture =
userProfile.picture !== null
?
: "";
return (
<p>
<Image
src={profilePicture}
alt={
width={120}
height={120}
/>
<Link href={
<a>{username}</a>
</Link>
</p>
);
};
I'm getting
let userProfile = await getProfile(username);
let profilePicture =
userProfile.picture !== null
?
https://xxx/avatars/${userProfile.picture}: "";
return (
<p>
<Image
src={profilePicture}
alt={
${username}'s Avatar}width={120}
height={120}
/>
<Link href={
/profile/${username}}><a>{username}</a>
</Link>
</p>
);
};
I'm getting
Expected '>', got 'src' after the <Image tag, I'm still learning but it looks correct to me and I've ran out of brainpowerAnswered by Tan
turns out in my tiredness I was using .ts instead of .tsx and that caused all the problems
38 Replies
Alligator mississippiensis
did you import image from next?
TanOP
I have import Image from "next/image"; at the top yes
you have to do {
${username}'s Avatar}oh wait
thats just discord not showing ` nvrm
TanOP
yea the formatting is weird
Asiatic Lion
hm odd
TanOP
I don't need to install any specific npm module, right? I assume this is all included in npm install next - else I guess it'd yell at me for missing modules
Asiatic Lion
no you dont
nextjs has all the image stuff
does the src have a value?
the profilePicture
maybe its that its "" thats making it fuck up
TanOP
i've also tried the variable straight up only having the URL and no ternary operation but it didn't make a difference
Asiatic Lion
can you try some random image url from the web in src
TanOP
if I copy/paste the example from the documentation of next/image, the same thing happens also
Asiatic Lion
oh i see
weird
do you have that image there tho
TanOP
this is not the only code in which I'm using <Image, but it is the only place this error occurs
yes, the image exists
Asiatic Lion
aight
@Tan this is not the only code in which I'm using <Image, but it is the only place this error occurs
Asiatic Lion
what do the other places look like
TanOP
i'm not the only dev on this so ofc all his works but mine has endless problems
for what its worth even if I copy/paste that I still get "Expected '>', got 'id'"
it doesn't seem to like anything after <Image
Asiatic Lion
lmao what the hell
TanOP
i'm just cursed
Asiatic Lion
use img for now, thats a weird bug youre having
TanOP
yeah I may have to do that lmao. gonna mess with it for a bit longer before giving up
Hamiltonstövare
@Tan Show full file code
TanOP
I just fixed it, apparently I am an idiot
TanOP
turns out in my tiredness I was using .ts instead of .tsx and that caused all the problems
Answer
TanOP
I appreciate all the help, kept me going lmao
Asiatic Lion
oh LOL
glad you got it fixed
@Tan turns out in my tiredness I was using .ts instead of .tsx and that caused all the problems
no worries lol, common things we all mess up lol