缓解 Flarum 图片加载时的布局偏移

解决思路

1. 在 img 中指定：可以声明元素具体的 width / height，让浏览器提前计算图片的宽高比，以保留展示图像的排版空间，可以避免文档下载过程中的布局偏移。（具体而言除了 width / height ，还有 srcset / sizes 也会影响到这里，但相对小众）

2. 在 CSS 中指定：CSS 有提供了一个 aspect-ratio 的属性，兼容性 在新版本浏览器中都还不错（Chrome 88+ / Safari 15+）

3. padding hack：利用 padding 百分比单位基于宽度的特性，用 padding-top + background-img 的方式，实现固定宽高比的占位元素，并以背景的方式填充图片

1. Markdown 的 ![](https://xxxxx) 图片链接

2. BBCode 插件自带的 [img]https://xxxxx[/img] 标签

3. fof/upload 插件的 [upl-img-preview url=https://xxx /] 标签

1. 在 HTML 渲染流程补充针对 aspect-ratio 的处理逻辑

2. 在 img 元素的来源部分，想办法加上一些宽高比的信息

Flarum 的内容渲染

注：以下基于 Flarum v1.8 版本切入，未来 2.x 后的版本可能会有变动

Img 元素的处理

// original template
<img src="{@url}" title="{@base_name}" alt="{@base_name}"/>

// new template
<img src="{@url}" width="{@width}" height="{@height}" title="{@base_name}" alt="{@base_name}" />

注：s9e/TextFormatter 的 Configurator 工作有一定的性能开销，Flarum 为此加入了缓存机制、并用到 Template 自动编译出来的 PHP Renderer，所以当 Template 发生改动时，我们需要手动清理一下缓存、使其重新生成对应的 Renderer。

(new Extend\Formatter)
    ->render(FormatImgs::class)
    ->configure(ConfigureImgs::class),

// 当有指定 width / height 的情况下，把高度设置为 auto
.Post-body img[width][height]:not([width=""]):not([height=""]) {
    height: auto;
}

// 避免变形
.Post-body img {
    object-fit: contain;
}

宽高的获取

1. 指定了 width 和 height

2. 只指定了 height，未指定 width

3. 只指定了 width，未指定 height

4. width、height 均未指定的情况

function processAttributes($url, $attributes) {
    if (!empty($attributes['height']))
        return $attributes;
    $size = $this->fetchSize($url);
    if (!$size)
        return $attributes;
    if (!empty($attributes['width'])) {
        $attributes['height'] = floor($attributes['width'] * $size['h'] / $size['w']);
    } else {
        $attributes['width'] = $size['w'];
        $attributes['height'] = $size['h'];
    }
    return $attributes;
}

public function handle(Repository $cache)
{
    $size = self::$fastImageSize->getImageSize($this->url);
    $key = FormatImgs::getImageCacheKey($this->url);
    if (!$size) {
        $cache->set($key, [
        'failed' => true,
        ], 28800);
    } else {
        $cache->set($key, [
        'w' => $size['width'],
        'h' => $size['height'],
        ]);
    }
}

1. Flarum 需启用异步的任务队列，以免阻塞正常的请求响应（这里用 blomstra/flarum-redis 扩展实现）

2. 避免图片 URL 长度过长带来问题，通过 hash 生成固定长度的 cache key（这里用的 sha256）

3. 避免失败反复拉取，失败的情况做个标记，并注意 cache 的过期时间

4. 避免这个请求机制被攻击者利用，针对域名做一个白名单，只有白名单的图片域名才应用此优化

public function __invoke(Renderer $renderer, $context, $xml, Request $request = null)
{
    $tempXML = Utils::replaceAttributes($xml, 'IMG', function ($attributes) {
        return $this->processAttributes($attributes['src'], $attributes);
    });

    $resultXML = Utils::replaceAttributes($tempXML, 'UPL-IMAGE-PREVIEW', function ($attributes) {
        return $this->processAttributes($attributes['url'], $attributes);;
    });

    return $resultXML;
}

总结