Answered by
Oliver Hall
In React, the img
element and its alt
attribute are used similarly to their HTML counterparts. However, due to JavaScript's syntax, the attributes (props) of JSX elements are written in camelCase rather than lowercase. So, the alt
attribute remains the same, but the src
attribute becomes src
.
Here is an example:
import React from 'react'; function ImageComponent() { return ( <img src="url_to_image.jpg" alt="Description of image" /> ); } export default ImageComponent;
In this code snippet, ImageComponent
is a functional component returning an img
JSX element. The src
attribute is set to the URL of the image and the alt
attribute is set to a text description of the image.
The alt
attribute is important for accessibility as it provides a textual alternative to an image. If the image cannot be loaded or if the user is using a screen reader due to visual impairment, the alt
description will be used instead.