Làm cách nào để bạn nhập hình ảnh vào javascript?

Xin chào các bạn, trong bài đăng này, chúng ta sẽ xem xét cách giải quyết vấn đề Cách hiển thị hình ảnh đã tải lên trong Html bằng cách sử dụng Javascript trong ngôn ngữ lập trình

Upload Image
Lưu tệp HTML. Lần sau khi bạn mở nó, bạn sẽ thấy trang web có hình ảnh mới được thêm vào của bạn
Làm cách nào để xem trước tệp trong Javascript?
Ba bước để xem trước một hình ảnh
sử dụng. files[0] trên phần tử đầu vào từ DOM. tài liệu
Sử dụng hàm tạo FileReader[]. Ở đây, chúng tôi tạo một phiên bản của FileReader
Sử dụng sự kiện onload và. thuộc tính kết quả của phiên bản FileReader[]
Làm thế nào để bạn hiển thị một hình ảnh ở frontend?
Chúng tôi sẽ sử dụng các bước sau để hiển thị hình ảnh trên giao diện người dùng. 1] Chúng tôi sẽ quay lại danh sách bài đăng của chúng tôi. thành phần. tệp html. imagePath theo cách sau

  

Ghi chú. Chúng tôi có thể nhập bao nhiêu hình ảnh tùy thích, nhưng mỗi hình ảnh phải có một tên duy nhất trong câu lệnh nhập, nếu không nó sẽ báo lỗi
Điều quan trọng là phải hiểu cách chỉ định và lấy đường dẫn tương đối cho các tệp; . Trong ví dụ trước, hình ảnh đã được lưu trong một 
import Logo from './images/react-logo.png';

const App = [] => {
   return [
      

         

      

   ];
};
2
Cách nhập ảnh bằng React bằng hàm request[]
Hàm require[] là một Nút. js được sử dụng để bao gồm các mô-đun bên ngoài từ các tệp khác với tệp hiện tại. Nó hoạt động giống như câu lệnh import và cho phép chúng tôi đưa vào hình ảnh
let Logo = require['./images/react-logo.png'];

const App = [] => {
   return [
      

         
      

  


   ];
};
Sự khác biệt duy nhất là dòng đầu tiên mà chúng tôi yêu cầu hình ảnh thông qua đường dẫn tương đối của nó và sau đó lưu trữ nó trong một biến mà chúng tôi đã truy cập trong thẻ img thông qua dấu ngoặc nhọn
Chúng tôi cũng có thể quyết định thực hiện nội tuyến này và tránh dòng bổ sung được sử dụng để gán hình ảnh cho một biến, vì nó không bắt buộc
const App = [] => {
   return [
      

         

      

   ];
};
Sự kết luận
Chúng tôi đã học cách nhập hình ảnh cục bộ bằng cách sử dụng câu lệnh import và hàm require[] trong bài viết này