JavaScript模板字面量中处理图片缺失的策略：三元运算符与DOM操作

在开发动态内容展示应用时，例如电影或电视节目列表，经常会遇到部分数据缺少海报图片的情况。此时，如果直接渲染一个空的<img>标签，不仅影响用户体验，还可能导致页面布局问题。本教程将详细介绍两种处理策略：利用javascript模板字面量中的三元运算符进行条件渲染，以及更推荐的通过dom操作动态构建元素的方法。

方法一：利用模板字面量与三元运算符进行条件渲染

当您使用JavaScript模板字面量（Template Literals）来构建HTML字符串时，三元运算符（Ternary Operator）提供了一种简洁的方式来根据条件渲染不同的内容。其基本语法是 condition ? expressionIfTrue : expressionIfFalse。

错误示例分析

许多初学者可能会尝试将三元运算符直接放入<img>标签的src属性中，例如：

<img src='https://image.tmdb.org/t/p/original/${item.backdrop_path} ? ${item.backdrop_path} : <h4>No Image Found</h4>' loading="lazy" alt="movie poster"/>

这种做法是错误的，原因在于src属性期望的是一个有效的图片URL字符串，而不是一段HTML代码。src属性内部的三元运算符只会影响URL的构建，而不会在图片路径无效时，将<h4>No Image Found</h4>作为替代内容渲染到页面上。浏览器会尝试将整个表达式的结果（例如https://image.tmdb.org/t/p/original/null ? null : <h4>No Image Found</h4>）作为URL加载，这显然会导致图片加载失败。

正确实现

正确的做法是让三元运算符决定渲染整个<img>元素还是一个替代的文本元素（如<h4>）。这意味着整个条件逻辑应该包裹在需要动态替换的HTML片段外部。

立即学习“Java免费学习笔记（深入）”；

假设item.backdrop_path是一个图片路径字符串，如果它存在（即为“真值” truthy），我们就渲染<img>标签；否则，就渲染一个提示信息。

const item = {
  id: 123,
  media_type: 'movie',
  backdrop_path: '/path/to/image.jpg', // 模拟有图片路径
  // backdrop_path: null, // 模拟无图片路径
  title: '电影标题',
  name: '节目名称'
};

const htmlContent = `
  <div class="trendingItem" data-id="${item.id}" data-type="${item.media_type}">
    <a href="#" id="viewItem" class="viewItem">
      ${item.backdrop_path // 检查 item.backdrop_path 是否存在且非空
        ? `<img src="https://image.tmdb.org/t/p/original/${item.backdrop_path}" loading="lazy" alt="${item.title ?? item.name} poster"/>`
        : `<h4>No Image Found</h4>` // 如果不存在，则渲染提示信息
      }
    </a>
    <h4>${item.title ?? item.name}</h4>
  </div>
`;

console.log(htmlContent);
// 将 htmlContent 插入到 DOM 中，例如：
// document.body.innerHTML = htmlContent;

代码解析：

• item.backdrop_path ? ... : ...：这个三元表达式是关键。它检查item.backdrop_path的值。
• 如果item.backdrop_path是真值（例如一个非空的字符串），则表达式返回一个完整的<img>标签字符串。
• 如果item.backdrop_path是假值（例如null, undefined, ''空字符串），则表达式返回一个<h4>No Image Found</h4>字符串。
• alt="${item.title ?? item.name} poster"：这里使用了空值合并运算符 ??，如果item.title为null或undefined，则使用item.name。这提供了更好的无障碍性。

方法二：推荐的DOM操作方法

尽管模板字面量结合三元运算符在某些简单场景下非常方便，但直接拼接HTML字符串存在一些固有的缺点：

• 安全性风险： 容易受到XSS（跨站脚本攻击）的影响，尤其是在处理用户输入时。
• 可维护性差： 复杂的HTML结构在字符串中难以阅读和维护。
• 性能问题： 频繁地操作innerHTML可能导致浏览器重新解析和重绘，影响性能。
• 难以调试： 运行时错误难以追踪到具体的HTML结构。

为了避免这些问题，更推荐使用原生的DOM（文档对象模型）方法来创建和管理HTML元素。这种方法将HTML结构视为JavaScript对象，通过编程方式构建页面。

createElement 辅助函数

为了简化DOM操作，我们可以创建一个简单的辅助函数来创建元素并设置属性和子节点：

千面数字人

千面 Avatar 系列：音频转换让静图随声动起来，动作模仿让动漫复刻真人动作，操作简单，满足多元创意需求。

156

查看详情

/**
 * 创建一个DOM元素。
 * @param {string} tag - 元素的标签名，例如 'div', 'img', 'h4'。
 * @param {Object} [attributes] - 元素的属性对象，例如 { class: 'my-class', id: 'my-id' }。
 * @param {...(Node|string)} children - 元素的子节点，可以是DOM节点或字符串。
 * @returns {HTMLElement} 新创建的DOM元素。
 */
const createElement = (tag, attributes, ...children) => {
  const el = document.createElement(tag);
  // 设置属性
  Object.entries(attributes ?? {}).forEach(([attr, val]) => {
    el.setAttribute(attr, val);
  });
  // 添加子节点
  el.append(...children);
  return el;
};

DOM操作实现

使用createElement辅助函数，我们可以以一种更结构化、更安全的方式来构建与上述模板字面量相同的HTML结构：

const item = {
  id: 123,
  media_type: 'movie',
  backdrop_path: '/path/to/image.jpg', // 模拟有图片路径
  // backdrop_path: null, // 模拟无图片路径
  title: '电影标题',
  name: '节目名称'
};

// 创建图像或替代文本节点
const imageOrPlaceholder = item.backdrop_path
  ? createElement("img", {
      src: `https://image.tmdb.org/t/p/original/${item.backdrop_path}`,
      loading: "lazy",
      alt: `${item.title ?? item.name} poster`,
    })
  : createElement("h4", null, "No Image Found"); // h4标签没有特定属性，所以传入null

// 创建链接元素
const anchorElement = createElement(
  "a",
  { href: "#", id: "viewItem", class: "viewItem" },
  imageOrPlaceholder // 将图像或替代文本作为子节点添加到链接中
);

// 创建标题元素
const titleElement = createElement(
  "h4",
  null,
  item.title ?? item.name // 使用空值合并运算符获取标题
);

// 创建主容器 div 元素
const trendingItemDiv = createElement(
  "div",
  {
    class: "trendingItem",
    "data-id": item.id,
    "data-type": item.media_type,
  },
  anchorElement, // 将链接作为子节点添加到 div 中
  titleElement // 将标题作为子节点添加到 div 中
);

// 将创建的元素添加到页面中
document.body.appendChild(trendingItemDiv);

代码解析：

• 通过嵌套调用createElement，我们可以清晰地表达HTML的层级结构。
• item.backdrop_path ? ... : ... 仍然用于条件判断，但现在它返回的是实际的DOM元素，而不是HTML字符串。
• createElement函数内部处理属性设置和子节点追加，使得主逻辑更简洁。
• 最终，我们得到的是一个可直接添加到DOM中的trendingItemDiv元素，而不是一个字符串。

重要注意事项

1. 图片加载错误处理： 即使item.backdrop_path存在，图片也可能因为网络问题或URL无效而加载失败。您可以通过给<img>标签添加onerror事件处理函数来进一步增强健壮性：

   <img src="..." onerror="this.onerror=null;this.src='placeholder.png';" alt="..."/>

   登录后复制

   或者在DOM操作中：

   const imgElement = createElement("img", { /* ... */ });
   imgElement.onerror = function() {
     this.onerror = null; // 防止无限循环
     this.src = 'path/to/default-placeholder.png'; // 设置一个默认占位图
     this.alt = 'Image loading failed';
   };

   登录后复制

2. 无障碍性（Accessibility）： 始终为<img>标签提供有意义的alt属性。当图片无法显示时，屏幕阅读器会朗读alt文本，帮助视障用户理解图片内容。

3. 性能优化：

   • Lazy Loading（懒加载）： 使用loading="lazy"属性可以延迟加载屏幕外图片，提高页面初始加载速度。
   • 图片尺寸优化： 根据设备和显示区域提供不同尺寸的图片，减少不必要的带宽消耗。

4. 现代前端框架的实践： 在React、Vue、Angular等现代前端框架中，条件渲染和DOM操作通常被框架抽象和优化。例如，在React中，您可以直接在JSX中使用条件语句：

   {item.backdrop_path ? (
     <img src={`https://image.tmdb.org/t/p/original/${item.backdrop_path}`} loading="lazy" alt={`${item.title ?? item.name} poster`} />
   ) : (
     <h4>No Image Found</h4>
   )}

   登录后复制

   这些框架提供了更声明式、更高效的方式来管理UI，但在底层，它们依然依赖于类似的DOM操作原理。

总结

在JavaScript动态内容渲染中处理图片缺失是一个常见需求。对于简单的场景，利用模板字面量结合三元运算符可以快速实现条件渲染。然而，为了提高代码的安全性、可维护性和性能，尤其是在构建复杂的用户界面时，强烈建议采用原生的DOM操作方法。通过编程方式创建和管理HTML元素，不仅能更好地控制页面结构，还能有效规避字符串拼接带来的风险，为用户提供更稳定、更流畅的体验。

以上就是JavaScript模板字面量中处理图片缺失的策略：三元运算符与DOM操作的详细内容，更多请关注php中文网其它相关文章！