uni-app webview自定义404错误页面 html无法引入本地资源(如图片)

uni-app webview自定义404错误页面 html无法引入本地资源(如图片)

开发环境 版本号 项目创建方式
Windows 19042.985 HBuilderX

操作步骤:

按照官方教程https://ask.dcloud.net.cn/article/73设置webview自定义错误页面,并在自定义页面引入同路径本地资源如图片js文件等。

预期结果:

本地资源正常生效。

实际结果:

本地资源无法生效。

bug描述:

webview自定义404页面error.html与图片test.jpg放置在项目根目录下的hybrid/html文件下,并在manifest.json设置默认错误页面路径’/hybrid/html/error.html’,error.html文件中引入本地资源路径src为’/hybrid/html/test.jpg’的图片,图片无法显示,引入本地资源css、js文件同样无法生效。


更多关于uni-app webview自定义404错误页面 html无法引入本地资源(如图片)的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

有解决吗?

更多关于uni-app webview自定义404错误页面 html无法引入本地资源(如图片)的实战教程也可以访问 https://www.itying.com/category-93-b0.html


路径改成 ./test.jpg 应该就可以了

在 uni-app 的 webview 中使用自定义 404 页面时,引入本地资源失败是常见问题,主要原因是路径解析机制不同。

核心原因
当 webview 加载 error.html 时,其路径基准(base URL)并非项目根目录,而是 file:// 协议下的本地路径。直接使用 /hybrid/html/test.jpg 这样的绝对路径无法正确映射到物理文件。

解决方案

  1. 使用相对路径
    error.html 中,将资源路径改为相对路径。例如:

    <img src="./test.jpg">
    <script src="./script.js"></script>
    <link rel="stylesheet" href="./style.css">
    
  2. 确保文件位置正确
    error.html 和所有本地资源(图片、JS、CSS)必须放在同一目录下(如 /hybrid/html/),且相对路径指向正确。

  3. 检查 manifest.json 配置
    确保 manifest.json 中错误页面路径配置正确:

    {
      "networkTimeout": {
        "request": 20000,
        "connectSocket": 20000,
        "uploadFile": 20000,
        "downloadFile": 20000
      },
      "plus": {
        "error": {
          "url": "/hybrid/html/error.html"
        }
      }
    }
回到顶部