Published on

What is a React Image?

Authors

What is a React image?

A react image is an img tag replacement and hook for React.js; we could say it is a declarative, efficient, and flexible JavaScript library for building user interfaces. React Image allows one or more images to be used as fallback images, in case the browser couldn't load the previous image.

React Image uses the useImage hook internally, which encapsulates all the image loading logic. This hook works with React Suspense by default and will suspend painting until the image is downloaded and decoded by the browser.

2 ways to include an image in a React Component

With React, you need a way to include the image, since there's a build step. Read on to find 2 ways to do that.

👉 Option 1: import the image into the component

Put the image file under the src folder. To make it available, you need to import the image into the React component where you are using it. Then, you can reference it by that variable name. It's not necessary for the name to match the image, it can be any name you want.

👉 Option 2: Put the image in the public directory

The image file can be placed in the public folder (or in any folder that will be copied to the server if this is not Create React App).

Then, if your server is treating the public folder as the “root” directory, then your image will be available relative to that, just as it is the case with HTML.

How do I style an image in React?

In React, you can create an object with styling information, such as background image, width, height, and refer to the object in the style attribute in the HTML element.

Given the fact that the inline CSS is written in a JavaScript object, properties that have two names, like background-color, have to be written with camel case syntax.

How does Piio use this technology?

Piio images for React will let you optimize your images based on your visitors browser and screen size. With these new-generation formats, your images will have great quality and will consume less data.

Not only will your image’s load time be optimized, but there will also be a cutback in unnecessary network use.

Among the advantages we can mention:

  • Effortless integration
  • Thoughtful image compression
  • Integrated lazy loading
  • High DPI support and Scalability
  • Pixel-perfect responsive images
  • WebP and other new-generation formats and compatible with legacy browsers

You may also wanna read this articles:

• Discuss on Twitter •