Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – I create a Next app using typescript and tailwindcss i am unable to display my Image

I create a Next app using typescript and tailwindcss i am unable to display my Image location in Public/assests/images/me/me.png i also created a types folder in which i created a images.d.ts file

my console view

my code

import React from 'react';
import MyImage from "@/public/assets/images/me/me.png";
console.log(MyImage);

function Profile() {
  return (
    <div className='flex items-center gap-x-2 transition-colors duration-75 text-primary-foreground'>
      {/* photo  */}
      <div className='relative w-[100px] h-[100px] rounded-full flex justify-center items-center bg-gradient-to-r from-blue-joust to-green-benzol'>
        <img src={MyImage} alt='Sujeet Photo' className='w-[95px] h-[95px] border-[0.2vw] border-blue-cosmos rounded-full object-cover'/>
        {/* Online */}
        <div className='w-3 h-3 rounded-full bg-green-benzol border-blue-cosmos absolute right-0 bottom-5'></div>
      </div>
      <div className="text-3xl font-medium">SUJEET SINGHANIYA</div>
    </div>
  )
}

export default Profile;
Tags:

3

Answers


  1. 0

    You should use MyImage.src instead of directly using the static import MyImage itself.

    <img src={MyImage.src} />

    But in next.js, a better approach would be to use the Image component, which can directly use MyImage itself:

    import Image from "next/image";

...

<Image alt="Sujeet Photo" src={MyImage} />
    Login or Signup to reply.
  2. 0

    Nextjs provides an image component, try to use that for image optimization(Also recommended by the Nextjs itself). Comes from next/image, import it and use it.

    Login or Signup to reply.
  3. 0

    here you can show you image like it is because you are using html img tag so do it like no need to import

    <img src='/assets/images/me/me.png' alt='Sujeet Photo' className='w-[95px] h-[95px] border-[0.2vw] border-blue-cosmos rounded-full object-cover'/>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search