SvelteKit中使用@html渲染HTML文本失败，仅显示原始文本求助

问题根源 #

你从API获取的HTML内容是HTML实体转义后的字符串（比如<h1>代替<h1>），直接传给{@html}时，Svelte会把这些转义字符当作普通文本渲染，而不是解析为HTML标签。

解决方案：解码HTML实体 #

需要先把转义后的字符串解码为原始的HTML标签字符串，再交给{@html}渲染。

步骤1：添加解码函数

在组件的<script>中添加一个解码HTML实体的函数：

function decodeHtmlEntities(html: string): string {
  const textarea = document.createElement('textarea');
  textarea.innerHTML = html;
  return textarea.value;
}

步骤2：修改API请求逻辑

在fetchReadme函数中，对获取到的文本先解码再赋值：

async function fetchReadme() {
  try {
    const response = await fetch(`api_endpoint`);
    if (response.ok) {
      const rawText = await response.text();
      // 解码转义的HTML实体
      readmeContent = decodeHtmlEntities(rawText);
      console.log(readmeContent);
    } else {
      readmeContent = null;
    }
  } catch (error) {
    readmeContent = null;
  }
}

步骤3：确保渲染逻辑正确

确认模板中使用正确的变量（你的代码里变量是readmeContent，不是htmlString）：

<div>
  {@html readmeContent}
</div>

注意事项 #

• 安全风险：如果API返回的内容不可信，直接使用{@html}可能导致XSS攻击，建议只在内容可控的场景下使用，或提前对内容进行安全过滤。

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