Morioh
Login
CODE VN

CODE VN

5 months ago

Cách phát hiện hình ảnh được tải trong React

Trình xử lý sự kiện hình ảnh là các hàm được gắn vào hình ảnh (thường được biểu thị bằng <img>thẻ trong HTML) thực thi mã cụ thể khi xảy ra các tương tác nhất định của người dùng hoặc các sự kiện khác. Những sự kiện này có thể bao gồm từ những hành động đơn giản như nhấp vào hình ảnh cho đến những hành động phức tạp hơn như di chuột hoặc hoàn tất tải hình ảnh.

Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách phát hiện hình ảnh được tải trong React và cách kiểm tra xem hình ảnh có bị hỏng hay không bằng cách sử dụng trình xử lý sự kiện hình ảnh trong React.js. Trong bài đăng này, chúng tôi sẽ sử dụng trình xử lý sự kiện onError() để phát hiện hình ảnh bị hỏng.

  • Trình xử lý sự kiện onError kích hoạt khi có lỗi xuất hiện trong khi hình ảnh đang tải.
  • Trình xử lý hình ảnh onLoad được thêm vào thẻ hình ảnh. Nó cho phép phát hiện khi hình ảnh được tải xong trong React hoặc trong bất kỳ ứng dụng dựa trên JavaScript nào.

Mục lục

  • Bước 1: Tải xuống ứng dụng React
  • Bước 2: Xây dựng thành phần chức năng
  • Bước 3: Thiết lập Bootstrap trong React
  • Bước 4: Tìm hình ảnh bị tải hoặc hình ảnh bị hỏng
  • Bước 5: Đăng ký thành phần mới trong ứng dụng JS
  • Bước 6: Kiểm tra ứng dụng React

Bước 1: Tải xuống ứng dụng React

Khi làm việc với React hoặc các ứng dụng dựa trên nút, trước tiên bạn có thể muốn tạo một môi trường. Sẽ là tốt nhất nếu bạn cài đặt Node và NPM trên hệ thống của mình.

Bây giờ bạn có thể tạo một dự án React mới bằng công cụ React CRA. Bạn phải thực hiện lệnh dưới đây:

npx create-react-app react-blog
cd react-blog

Bước 2: Xây dựng thành phần chức năng

Thứ hai, tạo thư mục thành phần/ trong thư mục src/. Sau đó, tạo tệp mới, đặt tên là User.js .

Để tạo mã hàm, bạn sẽ cần loại mã hàm JavaScript như vậy.

import React from 'react'
function User() {
  return (
    <div>User page</div>
  )
}
export default User

Bước 3: Thiết lập Bootstrap trong React

Chúng ta có thể làm cho quá trình thiết kế giao diện người dùng nhanh hơn bằng cách thêm khung CSS Bootstrap vào dự án React.

Đây là lệnh mà bạn phải chạy bằng npm.

npm install bootstrap --legacy-peer-deps

Mở tệp App.js mà bạn có thể tìm thấy trong thư mục src/. Đơn giản chỉ cần nhập đường dẫn CSS bootstrap có nguồn gốc từ thư mục node_modules.

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

Giờ đây, với Bootstrap, bạn có thể tạo bất kỳ loại thành phần giao diện người dùng nào mà không cần có kiến ​​thức về CSS trước đó.

Bước 4: Tìm hình ảnh bị tải hoặc hình ảnh bị hỏng

Chúng tôi đã quản lý để tạo hai phương thức imageOnLoad và imageOnError. Cả hai chức năng tùy chỉnh sẽ hiển thị thông tin về các sự kiện onLoad và onError của hình ảnh.

Đặt mã đã cho vào tệp thành phần/User.js .

import React from "react";
const Image_1 = "https://image-not-found.png";
const Image_2 =
  "https://i.postimg.cc/8CVt73NY/wonderlane-N-As0-VQu7s-unsplash.jpg";
const BrokenImage =
  "https://i.postimg.cc/RZvT9tdr/guerrillabuzz-crypto-pr-Wtol-M5hsj14-unsplash.jpg";
const User = () => {
  const imageOnLoad = (event) => {
    console.log(`Picture successfully ${event.currentTarget.src} loaded.`);
    if (event.currentTarget.className !== "error") {
      event.currentTarget.className = "success";
    }
  };
  const imageOnError = (event) => {
    event.currentTarget.src = BrokenImage;
    event.currentTarget.className = "error";
  };
  return (
    <div className="container mt-3">
      <div className="row">
        <div className="col-6">
          <img
            src={Image_2}
            onLoad={imageOnLoad}
            onError={imageOnError}
            width="255"
            alt="Picture Two"
          />
        </div>
        <div className="col-6">
          <img
            src={Image_1}
            onLoad={imageOnLoad}
            onError={imageOnError}
            width="255"
            alt="Picture One"
          />
        </div>
      </div>
    </div>
  );
};
export default User;

Bước 5: Đăng ký thành phần mới trong ứng dụng JS

Giống như chúng ta đã tạo thành phần, đã đến lúc thêm thành phần này vào thành phần khác.

Do đó, hãy mở tệp thành phần chung — App.js và thêm mã đã cho vào đó.

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import User from "./components/User";
function App() {
  return (
    <div>
      <h2>React JS On Load and On Error Image Event Handler Example</h2>
      <User />
    </div>
  );
}
export default App;

Bước 6: Kiểm tra ứng dụng React

Cuối cùng, bạn có thể thử nghiệm ứng dụng ngay bây giờ. Đây là cách bạn có thể khởi động máy chủ phát triển ứng dụng.

npm start
http://localhost:3000

Phần kết luận

Trong bài đăng này, chúng ta đã học cách tìm xem hình ảnh đã tải xong hay xuất hiện lỗi trong quá trình tải trong React JS.

1.45 GEEK