所有开发者都喜欢了解实现某事正确的方法。通常是通过试错，但在这篇文章中，迪米特里斯·格拉马蒂科 分享了他的见解，并介绍了在 Joomla 4 中添加图像的最终方法，以及如何将这些优势回溯到较旧的 Joomla 版本。迪米特里斯解释了原生支持懒加载图像的历史和使用情况，以及一个存储图像的新概念——适配器，这两者都包含在 Joomla 4.0.5 中。

如以下所示，使其工作正确非常简单。

但首先需要一些背景。
Joomla 3.10 版本负责人托比亚斯·祖劳夫参与了 Joomla 项目的许多领域。有些比其他更知名。托比亚斯处理的项目之一是与谷歌开发者沟通，以实施在谷歌 Chrome 开发者控制台中运行 Google Lighthouse 报告时出现的所有良好建议。

托比亚斯还创建了一个插件，允许一个名为“图像懒加载”的新功能。项目决定不采用插件方法，而是将懒加载的原生支持作为所有图像的默认行为。

对此方法有很多讨论，并非所有人都支持。有些人担忧的原因是代码的第一版将每个图像都视为可懒加载的图像。

几个月后，当图像选择器代码需要被重新审视以允许远程存储图像（即媒体适配器）时，这种情况得到了纠正。

谷歌开发者也支持不需要插件的方法。插件方法有额外的开销，因为必须使用正则表达式解析渲染的 HTML 的一部分，然后在该部分 HTML 上添加一个属性。

除了明显的性能影响外，还影响了可用性，因为插件无法将属性添加到某些图像上，要么全部添加，要么全部不添加。

这些都是导致我们今天所处位置的历史事件。变化的一个后果是它对开发者处理图像的方式产生的影响。

在 Joomla 4.0.5 之前，将图片添加到输出 HTML 中的任务由开发者负责。他们必须想出一种方法来完成这项工作。该项目已经提供了两个不同的助手来完成这项任务，但结果发现，大多数（如果不是所有）开发者完全忽略了助手，因此图片的 URL 末尾出现了一些奇怪的 # 以及一些随机的单词和数字。

解决方案

为了结束这种情况，引入了一个新的 JLayout，它将允许开发者正确地输出图像标签，并且它更容易使用。

所以，不要写像这样的事情

<?phpecho '<img src="' . $imageURL .'" alt="' . htmlspecialchars($imageAlt, ENT_COMPAT, 'UTF-8') . '">';?>

推荐的方式是使用 JLayout

<?php echo LayoutHelper::render('joomla.html.image', ['src' => imageURL, 'alt' => $imageAlt]); ?>

优点

• URL 和 alt 属性将被正确转义
• 图像标签将被正确渲染，开发者不必担心 URL 末尾的 #
• 如果图像定义了宽度和高度属性，则图像标签将获得 loading="lazy" 属性
• 如果值传递为 false（布尔值），则忽略 alt 属性
• 任何额外的属性都将被正确渲染，只需将它们传递到命名数组中：（例如 'class' => 'my-class'）

关于向后兼容性

JLayout 可用于 Joomla 4.0.5 及更高版本，但已回滚到 Joomla 3.10.6，以便开发者在两个主要版本的 Joomla 中使用它们。对于那些想要支持更早版本的 Joomla 的人，推荐的方式是在您的扩展中分发 layouts/joomla/html/image.php 文件的副本，并在您的更新脚本中使用简单的 is_file() 检查将其复制到确切的位置。

以下是一个简单的示例

public function install($type, $parent)

 {

// After your existing code

if (!is_file(JPATH_ROOT . '/layouts/joomla/html/image.php'))

{

copy(

$parent->getParent()->getPath('source') . '/image.php',

JPATH_ROOT . '/layouts/joomla/html/image.php'

);

}

 }

希望这种方法可以帮助开发者节省时间，创建更干净、更安全的代码，让我们的生活更轻松。