Giới thiệu
Khi phát triển các ứng dụng web với React, chúng tôi thường muốn bao gồm các yếu tố hình ảnh để thu hút sự quan tâm của người dùng. Các yếu tố hình ảnh này có thể là bất kỳ loại hình ảnh nào, bao gồm JPG, PNG, SVG, GIF và nhiều loại khác.
Trong bài viết này, chúng ta sẽ tìm hiểu cách nhập hình ảnh bằng React và xem những cách khác nhau có thể đạt được điều này.
Hình ảnh bên ngoài và hình ảnh cục bộ là hai loại hình ảnh chúng tôi muốn sử dụng trong ứng dụng React của mình. Chúng tôi chủ yếu quan tâm đến hình ảnh cục bộ trong bài viết này vì hình ảnh bên ngoài không yêu cầu chúng tôi nhập chúng.
Hình ảnh bên ngoài là hình ảnh đã được lưu trữ bên ngoài và có thể được truy cập bởi bất kỳ ai qua URL, trong khi hình ảnh cục bộ là hình ảnh chỉ có sẵn cho chúng tôi trên máy tính cục bộ hoặc thư mục dự án và chúng tôi muốn sử dụng trong ứng dụng của mình.
Cách hiển thị hình ảnh được lưu trữ bên ngoài
Trước khi chúng ta tìm hiểu cách nhập hình ảnh, điều quan trọng là phải hiểu rằng hình ảnh được lưu trữ ở nơi khác hoạt động giống như cách chúng ta luôn sử dụng hình ảnh trong HTML - bằng cách thêm URL vào src thuộc tính của img nhãn:
const App = () => {
return (
<div>
<img src="https://reactjs.org/logo-og.png" alt="React Logo" />
</div>
);
};
Bây giờ chúng ta hãy tìm hiểu cách chúng ta có thể nhập hình ảnh (cục bộ) với React!
Cách nhập hình ảnh bằng React
Ngoài các hình ảnh bên ngoài, cách hình ảnh được sử dụng trong React khác đáng kể so với các khung công tác khác hoặc thậm chí cả HTML. Những hình ảnh này trước tiên phải được nhập vào React trước khi chúng có thể được sử dụng trong ứng dụng của chúng tôi.
Điều này có thể được thực hiện theo hai cách: bằng cách sử dụng import hoặc bằng cách sử dụng require() hàm số. Chúng tôi sẽ xem xét cả hai cách tiếp cận.
Cách nhập hình ảnh với React bằng cách sử dụng nhập khẩu Tuyên bố
Bởi vì nó dễ đọc và dễ hiểu hơn, import câu lệnh là phương pháp được sử dụng phổ biến nhất để nhập các hình ảnh được lưu trữ cục bộ trong React. Các hình ảnh được coi là xuất mặc địnhvà khi chúng tôi nhập chúng, chúng tôi làm như vậy giống như cách chúng tôi nhập linh kiện. Điều này được thực hiện bằng cách chỉ định đường dẫn tương đối từ tệp đến hình ảnh mà chúng tôi đang nhập:
import Logo from './images/react-logo.png';
const App = () => {
return (
<div>
<img src={Logo} alt="React Logo" />
</div>
);
};
Trong đoạn mã trên, chúng tôi vẫn sử dụng img gắn thẻ và src nhưng lần này là src thuộc tính nhận một biến thay vì một chuỗi, được truyền bằng cách sử dụng dấu ngoặc nhọn trong JSX.
Lưu ý: 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; nếu không, lỗi và lỗi có thể xảy ra. Trong ví dụ trước, hình ảnh được lưu trong /src/images.
Cách nhập hình ảnh với React bằng cách sử dụng hàm request ()
Sản phẩm require() hàm là một hàm Node.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 theo cách tương tự như import tuyên bố và cho phép chúng tôi bao gồm các hình ảnh:
let Logo = require('./images/react-logo.png');
const App = () => {
return (
<div>
<img src={Logo} alt="React Logo" />
</div>
);
};
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 img thẻ qua dấu ngoặc nhọn.
Chúng tôi cũng có thể quyết định thực hiện điều này nội dòng và tránh dòng thừa đượ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 (
<div>
<img src={require('./images/react-logo.png')} alt="React Logo" />
</div>
);
};
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 import tuyên bố và require() chức năng trong bài viết này.
