- Nico Bistolfi
What is a React 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.
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