完整使用指南：图片、CSS、JS 外链怎么处理？

html2.link 只接受单个 HTML 文件。如果你的页面依赖本地图片、CSS 或 JS 文件，这篇指南告诉你每种情况的解决办法。

html2.link 的工作原理

上传后，你的 HTML 文件会被存储到 CDN 并生成一个公网链接。 浏览器直接加载这个 HTML 文件——所有资源都通过 HTML 里写的地址去获取。 这意味着：

  • 引用 https:// 开头的公网地址 → 正常加载
  • 引用你电脑上的本地文件（./style.css、images/bg.png）→ 加载失败，别人的浏览器找不到你本地的文件

情况一：本地图片

HTML 里写了 <img src="photo.jpg"> 或 background-image: url('hero.png')， 但图片文件在你电脑上，发布后图片会裂开。

解决方法：把图片上传成在线链接

1

打开 图片转链接 工具，把图片文件拖进去，复制生成的 https:// 链接。

2

回到 HTML 代码，把本地路径替换成刚才复制的链接。例如把 src="photo.jpg" 改成 src="https://cdn.example.com/abc123.jpg"。

3

重新粘贴修改后的 HTML 代码，发布即可。

创建页面右侧的「图片资源」面板也支持批量处理：上传图片后，工具会自动检测并替换 HTML 里匹配的文件名。

情况二：外链 CSS 文件

HTML 里写了 <link rel="stylesheet" href="style.css">， 而 style.css 是你本地的文件，发布后样式会全部失效。

解决方法 A：把 CSS 内联到 HTML（推荐）

把 CSS 文件的内容复制出来，放到 HTML 的 <head> 里，用 <style> 标签包裹：

<!-- 之前 -->
<link rel="stylesheet" href="style.css">

<!-- 修改后 -->
<style>
  /* 把 style.css 的全部内容粘贴到这里 */
  body { margin: 0; font-family: sans-serif; }
  ...
</style>

解决方法 B：使用公网 CDN（适合常见框架）

如果你用的是 Bootstrap、Tailwind、Bulma 等公开框架，直接换成 CDN 链接：

<!-- Bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">

<!-- Tailwind（Play CDN，适合原型） -->
<script src="https://cdn.tailwindcss.com"></script>

情况三：外链 JS 文件

HTML 里写了 <script src="app.js"></script>， 而 app.js 是本地文件，发布后脚本不会运行。

解决方法 A：把 JS 内联到 HTML（推荐）

和 CSS 一样，把 JS 文件内容复制进 <script> 标签：

<!-- 之前 -->
<script src="app.js"></script>

<!-- 修改后 -->
<script>
  // 把 app.js 的全部内容粘贴到这里
  function init() { ... }
  init();
</script>

解决方法 B：使用公网 CDN（适合第三方库）

<!-- jQuery -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>

<!-- ECharts -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>

<!-- Vue 3 -->
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>

情况四：多文件项目（Vue/React/Vite 工程）

如果你的项目是用 Vite、Create React App、Vue CLI 等脚手架创建的工程， 源码天然是多文件的，不能直接上传某一个文件。

解决方法：先构建，再上传

1

在项目目录执行 npm run build（或 pnpm build），生成 dist/ 文件夹。

2

打开 dist/index.html，查看里面的 <script> 和 <link> 标签是否引用了相对路径（如 ./assets/index-xxx.js）。

3

如果有相对路径引用，说明打包产物包含多个文件，html2.link 无法托管整个 dist 目录。这种情况建议使用 Vercel 或 Netlify 托管完整的静态产物。

4

如果希望在 html2.link 上发布，可以在 vite.config.ts 里加 build: { inlineDynamicImports: true } 尝试内联所有资源到单文件（小项目可行）。

用 AI 帮你一步完成

如果你不想手动内联，可以把整个 HTML 文件丢给 ChatGPT 或 Claude，告诉它： 

请把下面 HTML 里所有外链的 CSS 和 JS 内联进 HTML，
把本地图片替换成我提供的在线链接，
输出一个完整的单文件 HTML：

[粘贴你的 HTML]

AI 会帮你自动完成内联，输出的结果直接粘贴到 html2.link 就能发布。

常见报错排查

发布后页面空白/样式全无
大概率是 CSS 文件没有内联。按上面「情况二」的方法把 CSS 改成 <style> 内联。
页面有样式但功能不正常
JS 没有内联，或引用了本地接口地址（http://localhost:3000）。把 JS 内联并把接口地址改成线上地址。
图片显示裂开
先用「图片转链接」上传图片，再替换 HTML 里的路径。右侧「图片资源」面板可以自动替换同名文件。
用了 Tailwind 但样式没加载
把 <link href="./output.css"> 改成 <script src="https://cdn.tailwindcss.com"></script>，适合原型和演示用。

还是搞不定？

点击页面右下角的「联系客服」按钮，扫码添加微信，把你的 HTML 文件发给我们，我们帮你处理。

现在就试试

粘贴你的 HTML，几秒钟就能拿到一个可分享的网址。

← 返回全部指南