React Lazy Image Loading and TypeScript - No More Slow and Broken Images

React Lazy Image Loading and TypeScript - No More Slow and Broken Images

Creating a better UX is not as simple as it looks. An image of a broken thing can be art but not the broken Image.

Creating a better UX is not as simple as it looks. Every component on-page matters. While working on a complex piece of code, we almost forgot about the simplest thing, a broken image.

Here in this tutorial, I will explain how you can create a simple Image component without breaking existing code. This component will support lazy loading and broken images.

1. Create an Image Component

To start with, first create a folder in your component library and create a file named index.tsx.

mkdir -p components/Image
touch components/Image/index.tsx

Add below line to index.tsx.

// components/Image/index.tsx

import React from "react";

interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {}
export default ({ ...props }: ImageProps) => {
  return <img {...props} />;
};

Note: I am using typescript to build this component. You can just remove typing if your project does not support typescript.

2. How to consume in App Page

You can consume the Image component just like img HTML element. Since this image component extends HTMLImageElement. It supports all the Image properties.

// App.tsx

import React from "react";
import Image from "./components/Image";
function App() {
  return (
    <div className="App">
      <section className="section">
        <div className="container">
          <h1 className="title">React Components Demo</h1>
          <p className="subtitle">Lazy Image</p>
          <Image
            style={{ width: 400, height: 300 }}
            src="https://upload.wikimedia.org/wikipedia/commons/f/ff/Pizigani_1367_Chart_10MB.jpg"
          />
          <br />
          <Image src="https://doesnot.exits.com/image.png" />
        </div>
      </section>
    </div>
  );
}
export default App;

Try to reload the page, you will notice the image load very slowly. This is because the image is 10mb large. Same time the other image will be broken.

typescript javascript productivity

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

JavaScript Vs TypeScript 2021 | Difference Between JavaScript and TypeScript | Simple Explanation

JavaScript Vs TypeScript 2021 | Difference Between JavaScript and TypeScript | Simple Explanation. Let's check out the differences between JavaScript and TypeScript in the simplest of ways.

JavaScript vs TypeScript | JavaScript And TypeScript Difference | Full Stack Course

"This video on JavaScript vs TypeScript helps you understand the two languages and draw a comparison between them. JavaScript is a client-side scripting language while TypeScript is an OOP language developed to address the shortcomings of JavaScript. Although TypeScript supports all the features of JavaScript, they have significant differences.

What is TypeScript? Why TypeScript? and Why Not TypeScript?

TypeScript extends JavaScript by adding Types. There are many great reasons to switch to TypeScript. Especially if your team uses JavaScript. There are some reasons to not use TypeScript as there are with any language or framework.

Will TypeScript Replace JavaScript? Learn TypeScript | TypeScript Tutorial 2021

In today's video, I'm gonna show you all the basic concepts you need to know to be successful with TypeScript as well as how you can start using TypeScript right away with React. TypeScript will make you a better JavaScript developer for several reasons. You’ll feel confident when writing code. Fewer errors will appear in your production code. It will be easier to refactor code. You’ll write fewer tests. And overall, you’ll have a better coding experience in your editor.

Hire Dedicated JavaScript Developers -Hire JavaScript Developers

Hire dedicated JavaScript Developers who are proficient in AngularJS, ReactJS, NodeJS, & VueJS frameworks. Get flexible hiring models as per your business requirements.