微信小程序显示网络图片错误

Question

微信小程序显示网络图片错误
我使用uniapp编写的图片显示代码，在微信小程序中运行时，网络图片无法显示，但图片还是占了位置的

，
在HBuilder的内置浏览器可以显示

，在微信小程序中访问图片报错
[渲染层网络层错误] Failed to load image http://192.168.10.101:9000/bucket/2024-04-19/01-ade58a.jpg
net::ERR_PROXY_CONNECTION_FAILED
(env: Windows,mp,1.06.2401020; lib: 3.4.0)

Answer 1

引自免费微信小程序：皆我百晓生

为了帮助您解决这个问题，我们需要检查几个可能的原因并提供相应的解决方案。

首先，确保您的服务器地址（在这个例子中是 http://192.168.10.101:9000）可以从微信小程序的客户端正确访问。由于错误信息提到了代理连接失败，这可能是由于网络配置、防火墙设置或服务器本身的问题导致的。建议您尝试以下步骤：

1. 确保服务器在公网上可用：如果您的服务器只在局域网内可用，微信小程序可能无法直接访问。请将服务器部署到外网，或者确保服务器支持通过NAT穿透。

2. 检查防火墙设置：确保没有阻止从微信小程序访问的防火墙规则。

3. 使用正确的域名或IP地址：确保在微信小程序中使用的URL是可访问的，并且服务器正在监听该端口。

4. 跨域问题：微信小程序对跨域请求有限制，确保您的服务器设置了正确的CORS（Cross-Origin Resource Sharing）头部，允许来自微信小程序的请求。

如果您仍然遇到问题，可以尝试以下代码示例来优化图片加载：

<!-- 在wxml文件中的图片标签 -->
<image src="http://192.168.10.101:9000/bucket/2024-04-19/01-ade58a.jpg" mode="widthFix"></image>

<!-- 在对应的js文件中添加网络错误处理 -->
Page({
  onLoad: function () {
    wx.error(function (res) {
      if (res.errCode === 404) {
        // 图片未找到错误处理
      } else if (res.errCode === -1) {
        // 网络请求错误处理
        console.log('Network request failed');
      }
    });
  }
})

这段代码会捕获wx.request错误，并根据错误码进行不同的处理。对于网络请求错误（errCode为-1），您可以显示一个默认图片或者提示用户网络异常。

另外，确保您的服务器返回的状态码是200（OK），并且提供了正确的Content-Type响应头（通常是image/jpeg或image/png等）。如果服务器返回的是404或其他非成功状态码，图片也无法正常显示。

如果问题依然存在，建议您检查微信开发者工具中的调试日志，可能会有更详细的错误信息可以帮助定位问题。