如何在模板字面量中正确插入img标签避免显示源码或[object Object]

问题原因分析 #

• 第一种写法错误：返回的是纯HTML字符串，前端框架默认会对渲染内容做转义防止XSS攻击，因此字符串不会被解析为DOM节点，直接显示源码。
• 第二种写法错误：你将JSX（或框架的虚拟DOM语法）直接嵌套在模板字面量中，虚拟DOM本质是JS对象，被转为字符串时就会输出[object Object]。

正确实现方案 #

方案1：声明式框架推荐写法（优先使用，无XSS风险） #

直接返回虚拟DOM/JSX，不需要套模板字面量：

React 示例

// 直接返回JSX即可，不要包裹模板字面量
return isEmpty 
  ? <img src={redExclamation} alt="校验失败" />
  : <img src={greenCheck} alt="校验通过" />

Vue 示例

<template>
  <!-- 模板内动态绑定src属性即可 -->
  <img 
    :src="isEmpty ? redExclamation : greenCheck" 
    :alt="isEmpty ? '校验失败' : '校验通过'" 
  />
</template>

方案2：原生HTML注入（仅特殊场景使用，存在XSS风险） #

如果确实需要渲染HTML字符串，使用框架提供的原生HTML注入能力，注意提前校验所有动态内容避免安全问题：

React 示例

return <div 
  dangerouslySetInnerHTML={{
    __html: isEmpty 
      ? `<img src="${redExclamation}" alt="校验失败" />`
      : `<img src="${greenCheck}" alt="校验通过" />`
  }}
/>

Vue 示例

<template>
  <div v-html="
    isEmpty 
      ? `<img src='${redExclamation}' alt='校验失败' />`
      : `<img src='${greenCheck}' alt='校验通过' />`
  "></div>
</template>

注意事项 #

• 除非必要，优先使用方案1的声明式写法，既安全也符合框架设计规范
• 使用HTML注入时，如果redExclamation、greenCheck的取值来自用户输入或不可信源，必须做白名单校验，避免XSS注入攻击
• 所有img标签建议补充alt属性，提升页面可访问性

内容的提问来源于stack exchange，提问作者nothingtodo94