微信小程序使用本地图片在真机预览不显示的问题解决

开发工具上本地图片可以显示,但是在真机上预览的时候不能显示

通常我们代码路径是代码是这样写的

<view class="logo">
          <image src="../../img/e8591fd7b1043bd3b4eb07d86243b5b.png" class="login-image" ></image>
</view>

最后发现路径这样写在真机预览上无法显示

解决办法

  1. 路径需要相对于根目录来写

<view class="logo">
          <image src="/img/e8591fd7b1043bd3b4eb07d86243b5b.png" class="login-image" ></image>
</view>
  1. 路径直接使用网络图片地址写

<view class="logo">
          <image src="https://s3.bmp.ovh/imgs/2021/11/97b53956451470ab34.png" class="login-image" ></image>
</view>

这样就可以解决真机预览图片不显示问题了。

如果路径没有问题,图片真机预览还是无法显示,就需要检查一些以下几点:

1.图片是用image加载的;

2.图片的url里面没有中文;

3.图片的HTTP应为小写的http以及图片的后缀为小写的.png或者.jpg(建议全部为png)

4.域名已备案;

5.图片名称没有空格