微信小程序项目遇见问题一：图片调试器显示，真机不显示

PBitW

已于 2022-07-18 12:23:07 修改

阅读量5.8k

点赞数 3

分类专栏：微信小程序文章标签：微信小程序经验分享真机调试图片不显示微信小程序背景图片不显示

于 2020-09-15 18:37:00 首次发布

本文链接：https://blog.csdn.net/langwang_100/article/details/108605849

版权

微信小程序专栏收录该内容

13 篇文章

订阅专栏

这里可以分为四种情况，但是菜鸟发现有的情况可能是以前不支持，现在是可以支持的！

文章目录

一、图片命名用了中文，或者路径有中文

一般程序员是遇不见的，这也是菜鸟一时图简单，所以才出现了这个bug，毕竟菜鸟的英语不好！

二、写的是相对路径而不是根路径

相对路径：

<view class='seat-size' wx:for="{{item}}" wx:key="index" wx:for-index="index" wx:for-item="citem">
    <image src='../../../images/seaticon.png' class='seat-img' />
</view>

根路径：

<image src='/images/seaticon.png' class='seat-img' />

注意：

菜鸟发现，现在这个似乎要求不严格，不会产生加载不出图片的现象！

三、其它

图片名称去除空格

网络图片，图片的 HTTP/HTTPS 应为小写的 http/https 以及图片的后缀为小写的.png或者.jpg

注意：

如果http显示不了，可以尝试改成https，该篇博客是这样说的：

域名已备案

2022.7.18 补充

四、微信小程序背景图片

最近菜鸟上班了，然后正好做微信小程序需要有背景图，之前没搞过つ﹏⊂

这里就要注意两点：

1、背景图片不能在wxss里面写！
参考：微信小程序 wxss 背景图本地资源图片无法通过 WXSS 获取，可以使用网络图片，或者 base64

2、背景图写在style里面，用相对路径、绝对路径真机调试都不显示（电脑显示）！

所以最好的办法就是用image标签，然后定位成背景图片！！！