Các trang web được xem trên nhiều thiết bị khác nhau với kích thước màn hình và tốc độ kết nối khác nhau. Khi cung cấp hình ảnh, tốt nhất là không sử dụng cùng một hình ảnh cho tất cả các thiết bị. Hình ảnh lớn có thể ổn trên máy tính để bàn có kết nối internet nhanh, nhưng trên thiết bị di động nhỏ với băng thông hạn chế, quá trình tải xuống có thể mất nhiều thời gian Thư viện phương tiện có hỗ trợ tạo các tệp cần thiết và đánh dấu HTML cho hình ảnh phản hồi. Ngoài ra medialibrary còn có hỗ trợ tải ảnh lũy tiến Hãy thử một bản demo của khái niệm ở đây Bạn có phải là người học trực quan?Đây là video cho bạn thấy tất cả về hình ảnh phản hồi Bạn muốn xem nhiều video như thế này? Giới thiệu thuộc tính srcsetCách phổ biến nhất để hiển thị ảnh là sử dụng phần tử <img src="large.jpg"
srcset="large.jpg 2400w, medium.jpg 1200w, small.jpg 600w">
1 với thuộc tính <img src="large.jpg"
srcset="large.jpg 2400w, medium.jpg 1200w, small.jpg 600w">
2<img src="my-image.jpg">
Sử dụng đánh dấu này, trình duyệt sẽ luôn hiển thị <img src="large.jpg"
srcset="large.jpg 2400w, medium.jpg 1200w, small.jpg 600w">
3 bất kể kích thước màn hìnhNhư được mô tả trong phần này, bạn cũng có thể sử dụng thuộc tính <img src="large.jpg"
srcset="large.jpg 2400w, medium.jpg 1200w, small.jpg 600w">
4 để chỉ ra các phiên bản khác nhau của hình ảnh và chiều rộng tương ứng của chúng<img src="large.jpg"
srcset="large.jpg 2400w, medium.jpg 1200w, small.jpg 600w">
Một cách tiếp cận quy mô thực dụngThuộc tính <img src="large.jpg"
srcset="large.jpg 2400w, medium.jpg 1200w, small.jpg 600w">
4 thường được đi kèm với thuộc tính <img src="large.jpg"
srcset="large.jpg 2400w, medium.jpg 1200w, small.jpg 600w">
6 để thông báo trước cho trình duyệt cách hình ảnh sẽ được hiển thị cho các điểm dừng khác nhau________số 8_______Khi sử dụng <img src="large.jpg"
srcset="large.jpg 2400w, medium.jpg 1200w, small.jpg 600w">
4 và <img src="large.jpg"
srcset="large.jpg 2400w, medium.jpg 1200w, small.jpg 600w">
6, trình duyệt sẽ tự động tìm ra hình ảnh nào là tốt nhất để sử dụngGiả sử trình duyệt của bạn rộng 1200 pixel, thuộc tính <img src="large.jpg"
srcset="large.jpg 2400w, medium.jpg 1200w, small.jpg 600w">
6 yêu cầu hình ảnh có kích thước bằng một nửa (50vw = 600px). Bạn sẽ kết thúc với phiên bản <img src="large.jpg"
srcset="large.jpg 2400w, medium.jpg 1200w, small.jpg 600w"
sizes="(min-width: 1200px) 50vw,
100vw">
0. Nhưng giả sử bạn có màn hình retina với mật độ điểm ảnh là 2, trình duyệt biết rằng chúng tôi cần <img src="large.jpg"
srcset="large.jpg 2400w, medium.jpg 1200w, small.jpg 600w"
sizes="(min-width: 1200px) 50vw,
100vw">
1 để hiển thị hình ảnh sắc nétTuy nhiên, thuộc tính <img src="large.jpg"
srcset="large.jpg 2400w, medium.jpg 1200w, small.jpg 600w">
6 yêu cầu rất nhiều công việc. bạn cần phối hợp giữa CSS phản hồi của mình và HTML đầu ra để đặt đúng _______6 cho mọi hình ảnh và mọi kịch bản bố cục. Nếu bạn bỏ qua thuộc tính <img src="large.jpg"
srcset="large.jpg 2400w, medium.jpg 1200w, small.jpg 600w">
6, trình duyệt sẽ cho rằng hình ảnh sẽ được hiển thị ở toàn bộ chiều rộng, điều này cũng không tối ưu trong nhiều trường hợp — ví dụ:. hình thu nhỏGiờ đây, thư viện phương tiện có cách tiếp cận thực dụng trong vấn đề này, vì vậy bạn không cần phải suy nghĩ về thuộc tính <img src="large.jpg"
srcset="large.jpg 2400w, medium.jpg 1200w, small.jpg 600w">
6 và có thể tự do thử nghiệm với các bố cục trang khác nhau. chúng tôi đặt <img src="large.jpg"
srcset="large.jpg 2400w, medium.jpg 1200w, small.jpg 600w">
6 ban đầu thành <img src="large.jpg"
srcset="large.jpg 2400w, medium.jpg 1200w, small.jpg 600w"
sizes="(min-width: 1200px) 50vw,
100vw">
7 để tải hình ảnh nhỏ nhất trước và sau khi tải, điều chỉnh <img src="large.jpg"
srcset="large.jpg 2400w, medium.jpg 1200w, small.jpg 600w">
6 theo chiều rộng được hiển thị của hình ảnh bằng JavaScript. Chúng tôi đặt chiều rộng này ở giá trị <img src="large.jpg"
srcset="large.jpg 2400w, medium.jpg 1200w, small.jpg 600w"
sizes="(min-width: 1200px) 50vw,
100vw">
9. nếu bạn làm cho trình duyệt của mình rộng hơn, một phiên bản thậm chí còn tốt hơn sẽ được tảiĐồng thời, chúng ta có thể sử dụng kỹ thuật này để sử dụng hình ảnh nhỏ nhất này làm trình giữ chỗ Tải hình ảnh liên tụcKhi truy cập blog Phương tiện, bạn có thể nhận thấy (trên kết nối chậm hơn) rằng trước khi hình ảnh đầy đủ được hiển thị, một phiên bản mờ của hình ảnh được hiển thị. Hình ảnh mờ được thay thế bằng hình ảnh có độ phân giải cao ngay sau khi phiên bản lớn đó được tải xuống. Hình ảnh bị mờ thực sự là một hình ảnh rất nhỏ đang được tăng kích thước Ưu điểm của việc hiển thị phiên bản mờ là khách truy cập có gợi ý về nội dung sẽ được hiển thị từ rất sớm và bố cục trang của bạn đã sẵn sàng ngay lập tức Thư viện phương tiện đi kèm với hỗ trợ tải hình ảnh liên tục ra khỏi hộp. Hình ảnh mờ nhỏ sẽ tự động được tạo bất cứ khi nào bạn tận dụng hình ảnh phản hồi. Bằng cách thay thế thuộc tính <img src="large.jpg"
srcset="large.jpg 2400w, medium.jpg 1200w, small.jpg 600w">
6 khi tải bằng JavaScript, trình giữ chỗ nhỏ sẽ được hoán đổi bằng phiên bản lớn hơn ngay khi được tải xuốngTrình giữ chỗ này được mã hóa base64 dưới dạng SVG bên trong thuộc tính <img src="large.jpg"
srcset="large.jpg 2400w, medium.jpg 1200w, small.jpg 600w">
4, do đó, nó có sẵn ngay trong phản hồi ban đầu mà không cần thêm yêu cầu mạng. SVG có tỷ lệ chính xác giống như hình ảnh gốc, vì vậy bố cục sẽ không bị nhấp nháy trong quá trình hoán đổiNếu bạn muốn tận dụng hình ảnh phản hồi nhưng không muốn tải hình ảnh liên tục, bạn có thể đặt khóa $yourModel
->addMedia($yourImageFile)
->withResponsiveImages()
// or if you want to add it based on a condition then use
->withResponsiveImagesIf($condition) // accepts "closure or boolean"
->toMediaCollection();
2 trong tệp cấu hình $yourModel
->addMedia($yourImageFile)
->withResponsiveImages()
// or if you want to add it based on a condition then use
->withResponsiveImagesIf($condition) // accepts "closure or boolean"
->toMediaCollection();
3 thành $yourModel
->addMedia($yourImageFile)
->withResponsiveImages()
// or if you want to add it based on a condition then use
->withResponsiveImagesIf($condition) // accepts "closure or boolean"
->toMediaCollection();
4Tạo các hình ảnh cần thiếtTrong thuộc tính <img src="large.jpg"
srcset="large.jpg 2400w, medium.jpg 1200w, small.jpg 600w">
4 của <img src="large.jpg"
srcset="large.jpg 2400w, medium.jpg 1200w, small.jpg 600w">
1 các tệp hình ảnh khác nhau có thể được chỉ định. Thư viện phương tiện có thể tự động tạo những hình ảnh đó cho bạnKhi thêm hình ảnh vào thư viện phương tiện, chỉ cần sử dụng chức năng $yourModel
->addMedia($yourImageFile)
->withResponsiveImages()
// or if you want to add it based on a condition then use
->withResponsiveImagesIf($condition) // accepts "closure or boolean"
->toMediaCollection();
7$yourModel
->addMedia($yourImageFile)
->withResponsiveImages()
// or if you want to add it based on a condition then use
->withResponsiveImagesIf($condition) // accepts "closure or boolean"
->toMediaCollection();
Đằng sau hậu trường, thư viện phương tiện sẽ tạo ra nhiều biến thể kích thước cho hình ảnh của bạn. Để tìm hiểu những biến thể nào được tạo và cách tùy chỉnh, hãy xem tại đây Hiển thị hình ảnh phản hồiĐể hiển thị hình ảnh phản hồi, chỉ cần xuất đối tượng $yourModel
->addMedia($yourImageFile)
->withResponsiveImages()
// or if you want to add it based on a condition then use
->withResponsiveImagesIf($condition) // accepts "closure or boolean"
->toMediaCollection();
8 trong chế độ xem phiến{{-- in a Blade view --}}
<h1>My responsive images</h1>
{{ $yourModel->getFirstMedia() }}
Mỗi hình ảnh được đính kèm với mô hình của bạn, HTML kết quả sẽ trông giống như thế này <img srcset="/media/1/responsive-images/testimage___media_library_original_188_105.png 188w, /media/1/responsive-images/testimage___media_library_original_158_88.png 158w, /media/1/responsive-images/testimage___media_library_original_132_74.png 132w, /media/1/responsive-images/testimage___media_library_original_110_61.png 110w, data:image/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiB5PSIwIiB2aWV3Qm94PSIwIDAgMTkyMCAxMDgwIj4KCTxpbWFnZSB3aWR0aD0iMTkyMCIgaGVpZ2h0PSIxMDgwIiB4bGluazpocmVmPSJkYXRhOmltYWdlL2pwZWc7YmFzZTY0LC85ai80QUFRU2taSlJnQUJBUUFBQVFBQkFBRC8vZ0E3UTFKRlFWUlBVam9nWjJRdGFuQmxaeUIyTVM0d0lDaDFjMmx1WnlCSlNrY2dTbEJGUnlCMk9UQXBMQ0J4ZFdGc2FYUjVJRDBnT1RBSy85c0FRd0FEQWdJREFnSURBd01EQkFNREJBVUlCUVVFQkFVS0J3Y0dDQXdLREF3TENnc0xEUTRTRUEwT0VRNExDeEFXRUJFVEZCVVZGUXdQRnhnV0ZCZ1NGQlVVLzlzQVF3RURCQVFGQkFVSkJRVUpGQTBMRFJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVUvOEFBRVFnQUVnQWdBd0VpQUFJUkFRTVJBZi9FQUI4QUFBRUZBUUVCQVFFQkFBQUFBQUFBQUFBQkFnTUVCUVlIQ0FrS0MvL0VBTFVRQUFJQkF3TUNCQU1GQlFRRUFBQUJmUUVDQXdBRUVRVVNJVEZCQmhOUllRY2ljUlF5Z1pHaENDTkNzY0VWVXRId0pETmljb0lKQ2hZWEdCa2FKU1luS0NrcU5EVTJOemc1T2tORVJVWkhTRWxLVTFSVlZsZFlXVnBqWkdWbVoyaHBhbk4wZFhaM2VIbDZnNFNGaG9lSWlZcVNrNVNWbHBlWW1acWlvNlNscHFlb3FhcXlzN1MxdHJlNHVickN3OFRGeHNmSXljclMwOVRWMXRmWTJkcmg0dVBrNWVibjZPbnE4Zkx6OVBYMjkvajUrdi9FQUI4QkFBTUJBUUVCQVFFQkFRRUFBQUFBQUFBQkFnTUVCUVlIQ0FrS0MvL0VBTFVSQUFJQkFnUUVBd1FIQlFRRUFBRUNkd0FCQWdNUkJBVWhNUVlTUVZFSFlYRVRJaktCQ0JSQ2thR3h3UWtqTTFMd0ZXSnkwUW9XSkRUaEpmRVhHQmthSmljb0tTbzFOamM0T1RwRFJFVkdSMGhKU2xOVVZWWlhXRmxhWTJSbFptZG9hV3B6ZEhWMmQzaDVlb0tEaElXR2g0aUppcEtUbEpXV2w1aVptcUtqcEtXbXA2aXBxckt6dExXMnQ3aTV1c0xEeE1YR3g4akp5dExUMU5YVzE5aloydUxqNU9YbTUranA2dkx6OVBYMjkvajUrdi9hQUF3REFRQUNFUU1SQUQ4QStRZkVPaE1sd05veUs2andibzhjZHUyOEFaSGVvdkxlOWZMOUtTNFM1Z1haREp0cnFxWXlsVGJsSGNpblNyVmw3S1pTOFhhSWthbVJlUlhFU1FCVHhYcC8yS1M0MHIvU01zUUs1TzQ4T003c1VIQjZDdDNWcFZLZnRObVJTOXRTcmV4ZXlPcnRmOVZTUy82NUtLSytHcS94WkgwK0czUnRPUDhBaVduNlZsd0FiUnhSUlhxUi9nSTRLdjhBdkQ5VC85az0iPgoJPC9pbWFnZT4KPC9zdmc+ 32w" onload="if(this.dataset.sized===undefined){this.sizes=Math.ceil(this.getBoundingClientRect().width/window.innerWidth*100)+'vw';this.dataset.sized=''}" sizes="1px" src="/media/1/testimage.png" data-sized="">
Tạo hình ảnh đáp ứng cho chuyển đổiBạn cũng có thể tạo hình ảnh phản hồi cho bất kỳ chuyển đổi hình ảnh nào bạn xác định. Chỉ cần sử dụng $yourModel
->addMedia($yourImageFile)
->withResponsiveImages()
// or if you want to add it based on a condition then use
->withResponsiveImagesIf($condition) // accepts "closure or boolean"
->toMediaCollection();
7 khi xác định chuyển đổiĐây là một ví dụ trong đó chúng tôi xác định chuyển đổi để tạo phiên bản thang độ xám và tạo hình ảnh thang độ xám phản hồi namespace App;
use Spatie\MediaLibrary\HasMedia;
use Spatie\MediaLibrary\MediaCollections\Models\Media;
use Illuminate\Database\Eloquent\Model;
use Spatie\MediaLibrary\InteractsWithMedia;
class YourModel extends Model implements HasMedia
{
use InteractsWithMedia;
/**
* Register the conversions that should be performed.
*
* @return array
*/
public function registerMediaConversions(Media $media = null): void
{
$this
->addMediaConversion('my-conversion')
->greyscale()
->quality(80)
->withResponsiveImages();
}
}
Để tạo tệp thang độ xám đã chuyển đổi với hình ảnh phản hồi và giảm nhẹ, chỉ cần thêm một tệp $yourModel->addMedia($yourImage)->toMediaCollection('my-conversion');
Cài đặt {{-- in a Blade view --}}
<h1>My responsive images</h1>
{{ $yourModel->getFirstMedia() }}
0 của chuyển đổi cũng sẽ được áp dụng cho hình ảnh phản hồi được tạoTrong bộ điều khiển, bạn có thể chuyển đối tượng phương tiện sang chế độ xem // in a controller
public function index()
{
$media = $yourModel->getFirstMedia();
return view('my-view', compact('media'));
}
Để tạo thẻ <img src="large.jpg"
srcset="large.jpg 2400w, medium.jpg 1200w, small.jpg 600w">
1 có điền vào ____0_______4, chỉ cần sử dụng _____32_______3. Sử dụng tên chuyển đổi của bạn làm tham số đầu tiên
Làm cách nào để chèn hình ảnh vào laravel?
Tải ảnh lên trong Laravel 8 . Bước 1 – Tải xuống ứng dụng Laravel 8 Bước 2 – Thiết lập cơ sở dữ liệu với ứng dụng Bước 3 – Tạo mô hình và di chuyển Bước 4 – Tạo các tuyến đường Bước 5 – Tạo bộ điều khiển bằng Artisan Command Bước 6 – Tạo Blade View Bước 7 – Tạo thư mục hình ảnh bên trong Storage/app/public Bước 8 – Chạy máy chủ phát triển Làm cách nào để lưu trữ hình ảnh trong laravel?
Các bước để tải lên hình ảnh trong Laravel . Tải xuống ứng dụng Laravel 8 Cơ sở dữ liệu thiết lập Tạo mô hình và di chuyển Tạo tuyến đường Tạo bộ điều khiển Tạo Chế độ xem Blade Tạo thư mục hình ảnh Chạy máy chủ phát triển Làm cách nào để hiển thị hình ảnh trong laravel?
Cách tiêu chuẩn đơn giản của laravel để hiển thị hình ảnh. . nghệ nhân php làm. bộ điều khiển ImageController sử dụng Phản hồi; Tuyến đường. tiền tố ('hình ảnh') -> nhóm (hàm () { Làm cách nào để sử dụng hình ảnh trong laravel 8?
Hướng dẫn về ví dụ tải lên hình ảnh của Laravel 8 . Bước 1. Cài đặt Laravel. Nếu bạn chưa cài đặt Laravel 8 tại local, chỉ cần chạy lệnh sau bên dưới. . Bước 2. Tạo bộ điều khiển. . Bước 3. Tạo tuyến đường. . Bước 4. Thiết lập phương pháp điều khiển. . Bước 5. Tạo yêu cầu tải lên hình ảnh Laravel. . Bước 6. Thêm Chế độ xem | 
