uni-app webView 自定义404错误页面在html中使用img时IOS无法加载本地图片

uni-app webView 自定义404错误页面在html中使用img时IOS无法加载本地图片

操作步骤

ios 断网必现

预期结果

  1. ios 端404界面图片正常显示
  2. ios 端404后如何返回、刷新到正常界面

实际结果

  1. 自定义404错误页面 在html中使用img IOS 无法加载本地图片
  2. 网络连接成功后，如何返回正常

bug描述

问题1：自定义404错误页面使用img 加载本地图片显示异常
问题2：当手机断网时，也会跳转到404界面，但是当ios到404界面时，网络又恢复正常，那么在404点击返回goback时，如何返回到正常界面？安卓端使用history.back(-1); IOS端使用啥？

Image Image Image Image

开发环境 版本号 项目创建方式
PC开发环境操作系统 Windows 11 家庭中文版 23H2 HBuilderX
HBuilderX版本号 4.24
手机系统 iOS 12.4
手机厂商 苹果
手机机型 iPhone 6 Plus
页面类型 vue
vue版本 vue3
打包方式 云端

更多关于uni-app webView 自定义404错误页面在html中使用img时IOS无法加载本地图片的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

404错误页面建议使用base64格式图片字符串
网络恢复时应该直接跳转到真实的页面地址，如location.href=’’（不同系统发生错误时可能跳转次数不一样，不推荐使用history.back）

更多关于uni-app webView 自定义404错误页面在html中使用img时IOS无法加载本地图片的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中使用 webView 组件时，如果遇到自定义404错误页面并且在HTML中通过 <img> 标签加载本地图片时，iOS设备无法正确显示的问题，可以通过以下几种方式来解决。这里提供一个在 uni-app 中处理此问题的代码示例。

首先，确保你的 webView 组件正确设置，并且你已经有一个自定义的404错误页面（例如 404.html）。

1. 配置 webView 组件

在 uni-app 的页面中，配置 webView 组件并指定错误页面路径：

<template>
  <view>
    <web-view :src="url" @error="handleError"></web-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      url: 'https://example.com/some-page-that-might-not-exist'
    };
  },
  methods: {
    handleError(e) {
      this.url = '/static/404.html'; // 假设你的404页面放在static目录下
    }
  }
}
</script>

2. 在404.html中使用Base64编码图片

由于iOS对本地文件路径的访问限制，建议使用Base64编码的图片。以下是如何在 404.html 中使用Base64编码图片的示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>404 Not Found</title>
</head>
<body>
  <h1>404 - Page Not Found</h1>
  <img src="data:image/png;base64,iVBORw0KGg...（此处省略Base64编码）" alt="Error Image">
  <p>Sorry, the page you are looking for might have been removed, had its name changed, or is temporarily unavailable.</p>
</body>
</html>

3. 生成Base64编码

你可以使用在线工具或Node.js脚本来生成图片的Base64编码。以下是一个简单的Node.js脚本示例：

const fs = require('fs');

function base64_encode(file) {
  const bitmap = fs.readFileSync(file);
  return new Buffer(bitmap).toString('base64');
}

const imgPath = 'path/to/your/image.png';
const base64Data = base64_encode(imgPath);
console.log(`data:image/png;base64,${base64Data}`);

运行这个脚本，将输出图片的Base64编码，你可以将其复制到 404.html 的 <img> 标签中。

通过这种方式，你可以确保在iOS设备上，即使使用 webView 组件加载自定义的404错误页面，图片也能正确显示。注意，Base64编码会增加HTML文件的大小，因此在选择图片时需要权衡文件大小和加载性能。

回到顶部