时间戳

首页 > 解决方案 > 扩展 Laravel Mix 以预处理响应式图像

laravel - 扩展 Laravel Mix 以预处理响应式图像

问题描述

我的 Laravel 项目不需要数据库，因此不可能使用 Spatie Laravel 媒体库。我需要将图像预处理成各种尺寸并将它们合并到一个 srcset 中。是否可以使用 Laravel Mix 运行此过程？所有图像都将存储在公共目录 BTW 中。

这似乎是一个很好的起点，但这只是优化，而不是调整它们的大小。 https://runningwebgeek.com/2018/05/laravel-mix-image-processing/

加上刀片“快捷方式”将有助于将图像添加到页面模板，例如：{{$image, 'image-name.png', 'alt-tag-name'}}

标签： laravelwebpacklaravel-mix

解决方案

这非常粗糙，但它确实有效。

已安装：Laravel Mix Image Resizer

刀片组件：

@props(['alt','src','ext','sizes'])

@php $path = asset('img/'. $src . '.' . $ext) @endphp

<img alt="{{ $alt }}" src="{{ $path }}" srcset="

@foreach ($sizes as $i => $size) 
    @php $res_path = asset('img/' . $src . '-resized-' . $size . '.' . $ext . ' ' . $size . 'w') @endphp

    @php $size_last = end($sizes) @endphp

    {{ $res_path }} @if ($i < (count($sizes) - 1)){{ ', ' }} @endif
@endforeach 
" sizes="(max-width: {{ $size_last }}px) 100vw" />

在模板中使用：

<x-image alt="" src="banner" ext="jpg" :sizes="[768, 1024, 1280, 1440, 1600]" />

推荐阅读