Cách nhập hình ảnh trong javascript

Bạn có một tệp index.html và một số tệp css và js, và trong hầu hết các trường hợp, bạn muốn tách mã Javascript của mình thành nhiều tệp và chỉ cần nhập mã cần thiết vào tệp chính của mình, chẳng hạn như

import React from 'react';
import logo from './logo.png'; // Tell webpack this JS file uses this image

console.log[logo]; // /logo.84287d09.png

function Header[] {
  // Import result is the URL of your image
  return ;
}

export default Header;

0

Cách cũ là liên kết các tệp đó trong tệp html của bạn và tệp js chính của bạn được liên kết cuối cùng,
đối với exp, bạn có các tệp js này

script.js
keys.js
utils.js
anotherFile.js

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

và giả sử

import React from 'react';
import logo from './logo.png'; // Tell webpack this JS file uses this image

console.log[logo]; // /logo.84287d09.png

function Header[] {
  // Import result is the URL of your image
  return ;
}

export default Header;

0 của bạn là chính,

import React from 'react';
import logo from './logo.png'; // Tell webpack this JS file uses this image

console.log[logo]; // /logo.84287d09.png

function Header[] {
  // Import result is the URL of your image
  return ;
}

export default Header;

2 phụ thuộc vào

import React from 'react';
import logo from './logo.png'; // Tell webpack this JS file uses this image

console.log[logo]; // /logo.84287d09.png

function Header[] {
  // Import result is the URL of your image
  return ;
}

export default Header;

3 và

import React from 'react';
import logo from './logo.png'; // Tell webpack this JS file uses this image

console.log[logo]; // /logo.84287d09.png

function Header[] {
  // Import result is the URL of your image
  return ;
}

export default Header;

3 phụ thuộc vào

import React from 'react';
import logo from './logo.png'; // Tell webpack this JS file uses this image

console.log[logo]; // /logo.84287d09.png

function Header[] {
  // Import result is the URL of your image
  return ;
}

export default Header;

5 [từ phụ thuộc ở đây có nghĩa là tệp đó đang nhập một số dữ liệu hoặc cần một số dữ liệu từ tệp khác]

đây là giao diện trên tệp html của bạn [chỉ mục. html] để mã của bạn hoạt động

Bạn có thể nói vấn đề là gì, phải không?

Vì vậy, trong trường hợp của chúng tôi ở đây, chúng tôi có một vài tệp js, hãy tưởng tượng rằng bạn có một dự án lớn để thực hiện và giả sử có 20 tệp js trong dự án của bạn

Tôi cảm thấy bạn LOL,

vì vậy chúng ta cần tìm một Giải pháp, May mắn thay, có một giải pháp

Sử dụng nhập & xuất ES6 [Bạn có thể sử dụng yêu cầu ES5 cũ, nhưng ở đây chúng tôi sẽ sử dụng yêu cầu hiện đại hơn]

Chúng tôi chỉ cần một tệp tập lệnh để đưa vào tệp html của mình và trong tệp javascript đó, chúng tôi sẽ bao gồm tất cả các tính năng hoặc mã khác từ các tệp khác

Điều đầu tiên cần làm là biến tệp của chúng ta thành một mô-đun để chúng ta có thể sử dụng các tính năng ES6 và điều đó có thể được thực hiện với thuộc tính index.html0 trong thẻ script

index.html1

và trong các tệp của mình, bạn có thể xuất và nhập chức năng khác hoặc bất kỳ chức năng nào tương tự như vậy

Và đó là nó cho frontend

Phụ trợ hay còn gọi là Máy chủ

đối với máy chủ là bởi tệp index.html2 [được tạo bằng npm init], trong tệp đó thêm khóa loại và mô-đun làm giá trị của nó như thế này

Yeap Vậy là xong, bạn đã sẵn sàng để sử dụng tính năng ES6 mới và đẩy nhanh quá trình phát triển của mình

Bạn có thể

import React from 'react';
import logo from './logo.png'; // Tell webpack this JS file uses this image

console.log[logo]; // /logo.84287d09.png

function Header[] {
  // Import result is the URL of your image
  return ;
}

export default Header;

9 tệp ngay trong mô-đun JavaScript. Điều này báo cho webpack bao gồm tệp đó trong gói. Không giống như nhập CSS, nhập tệp cung cấp cho bạn giá trị chuỗi. Giá trị này là đường dẫn cuối cùng mà bạn có thể tham chiếu trong mã của mình, e. g. dưới dạng thuộc tính

.Logo {
  background-image: url[./logo.png];
}

0 của hình ảnh hoặc

.Logo {
  background-image: url[./logo.png];
}

1 của liên kết tới tệp PDF

Để giảm số lượng yêu cầu đến máy chủ, việc nhập hình ảnh dưới 10.000 byte sẽ trả về URI dữ liệu thay vì đường dẫn. Điều này áp dụng cho các phần mở rộng tệp sau. bmp, gif, jpg, jpeg và png. Các tệp SVG bị loại trừ do #1153. Bạn có thể kiểm soát ngưỡng 10.000 byte bằng cách đặt biến môi trường

.Logo {
  background-image: url[./logo.png];
}

2 như được ghi trong cấu hình nâng cao của chúng tôi

Đây là một ví dụ

import React from 'react';
import logo from './logo.png'; // Tell webpack this JS file uses this image

console.log[logo]; // /logo.84287d09.png

function Header[] {
  // Import result is the URL of your image
  return ;
}

export default Header;

Bản sao

Điều này đảm bảo rằng khi dự án được xây dựng, webpack sẽ di chuyển chính xác các hình ảnh vào thư mục bản dựng và cung cấp cho chúng tôi các đường dẫn chính xác

Điều này cũng hoạt động trong CSS

.Logo {
  background-image: url[./logo.png];
}

Bản sao

webpack tìm tất cả các tham chiếu mô-đun tương đối trong CSS [chúng bắt đầu bằng

.Logo {
  background-image: url[./logo.png];
}

3] và thay thế chúng bằng các đường dẫn cuối cùng từ gói đã biên dịch. Nếu bạn đánh máy sai hoặc vô tình xóa một tệp quan trọng, bạn sẽ thấy lỗi biên dịch, giống như khi bạn nhập một mô-đun JavaScript không tồn tại. Tên tệp cuối cùng trong gói đã biên dịch được tạo bởi webpack từ hàm băm nội dung. Nếu nội dung tệp thay đổi trong tương lai, webpack sẽ đặt cho nó một tên khác trong quá trình sản xuất, do đó bạn không cần phải lo lắng về bộ nhớ đệm nội dung dài hạn

Xin lưu ý rằng đây cũng là một tính năng tùy chỉnh của webpack

Nó không bắt buộc đối với React nhưng nhiều người thích nó [và React Native sử dụng cơ chế tương tự cho hình ảnh]

Một cách khác để xử lý nội dung tĩnh được mô tả trong phần tiếp theo

Thêm SVG​

Ghi chú. tính năng này khả dụng với

.Logo {
  background-image: url[./logo.png];
}

4 trở lên và

.Logo {
  background-image: url[./logo.png];
}

4 trở lên

Một cách để thêm tệp SVG đã được mô tả trong phần trên. Bạn cũng có thể nhập SVG trực tiếp dưới dạng thành phần React. Bạn có thể sử dụng một trong hai cách tiếp cận. Trong mã của bạn, nó sẽ trông như thế này

import { ReactComponent as Logo } from './logo.svg';

function App[] {
  return [
    
      {/* Logo is an actual React component */}
      
    
  ];
}

Bản sao

Điều này rất hữu ích nếu bạn không muốn tải SVG dưới dạng một tệp riêng biệt. Đừng quên dấu ngoặc nhọn trong quá trình nhập. Tên nhập

.Logo {
  background-image: url[./logo.png];
}

0 rất quan trọng và cho Tạo ứng dụng React biết rằng bạn muốn một thành phần React hiển thị một SVG, thay vì tên tệp của nó

Mẹo. Thành phần phản ứng SVG đã nhập chấp nhận một prop

.Logo {
  background-image: url[./logo.png];
}

1 cùng với các props khác mà một phần tử

.Logo {
  background-image: url[./logo.png];
}

2 chấp nhận. Sử dụng chỗ dựa này để thêm tiêu đề có thể truy cập vào thành phần svg của bạn