Self review: Displaying images

Is this code a correct way to import an image in React?

 import avatar from "./assets/avatar.png"

 function UserImage() {
    return ( 
       <div>
          <img 
             src={avatar}
             alt = "User image" 
          />
       < /div>
    )
 }
 export default UserImage;

Is this code a correct way to import an image in React?

 function UserImage() {
    const avatarImg = "https://picsum.photos/400/265";
    return ( 
       <div>
             <img 
                   src="avatar.png"
                   alt="User image" 
             />
       </div>
    )
 }
 export default UserImage;

What's wrong with this code?
```
 function ProfileImage() {
    const profileImg = "https://picsum.photos/400/265";
    return <img src={profileImg} alt="Profile image" />
 }
 export default ProfileImage;
```
- Nothing. This code is correct.
- There should be parentheses after the return keyword and the img element should spread its attributes over multiple lines.
- You must surround the img element with a root, wrapping div element.

Self review: Displaying images - React Basic

Comments

React Basics

Knowledge check: Navigation - React Basic

More from this blog

Build a Smart Cloud Application with Vibe Coding and MCP: Challenge Lab - GSP532

Daily Tech Brief — 03/08/2026

Daily Tech Brief — 02/08/2026

Daily Tech Brief — 01/08/2026

Daily Tech Brief — 31/07/2026

Command Palette

Comments

React Basics

Knowledge check: Navigation - React Basic

More from this blog