图片在网页能打开，小程序上不显示的解决方法

最新推荐文章于 2023-12-25 22:00:54 发布

原创最新推荐文章于 2023-12-25 22:00:54 发布 · 5k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

小程序专栏收录该内容

3 篇文章

订阅专栏

这种情况可能是图片被小程序自动加上了防盗链，导致显示不出来
解决方案：
1、在img标签是上加属性 referrerPolicy=“no-referrer”

 <image referrerPolicy="no-referrer"  src="{{item.attr.src}}" ></image>

2、在图片地址上加链接前缀 https://images.weserv.nl/?url=

 <image referrerPolicy="no-referrer"  src="https://images.weserv.nl/?url={{item.attr.src}}" ></image>

两者皆有效

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

前端一名小学生

关注关注

8
点赞
踩
10

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

微信小程序 - 详细解决web-view公众号文章或第三方网站分享转发后打开失败，页面显示“无法打开该页面，不支持打开“、“页面不存在“报错提示，苹果IOS系统手机打开是空白页，安卓手机系统会有提示！

🏆 前端领域优质创作者

08-22

1万+

微信小程序，公众号文章，第三方H5网页，内嵌网站分享后打不开，web-view，页面分享，小程序里公众号文章转发后无法打开，白屏，页面空白什么都没有，不支持打开，无法打开该页面，页面不存在，业务域名配置好了还是不行，公众号和小程序已经关联，iOS端苹果真机打开空白页，安卓手机，页面分享后，用户打不开提示错误，提示页面不存在，如何解决页面提示无法打开该页面，微信小程序web-view无法打开该页面不支持打开的解决方法，无法打开该页面不支持打开，最新详细解决方案，分享之后无法打开页面，提示无法打开该页面,不支持

vue/uniapp - 强力解决微信分享链接URL网页或网站文章到微信好友或微信朋友圈时，分享参数图片缩略图不显示问题，解决微信分享链接不能显示缩略（微信分享缩略图无法显示的解决办法，详细解决方案）

高级前端工程师

04-06

1万+

vue，uni-app，微信公众号网页，分享网页链接到微信朋友圈，分享链接，在微信中不显示缩略图，自定义缩略图不显示怎么办，分享卡片缩略图偶尔显示不出，微信分享网页链接缩略图不显示，微信分享缩略图无法显示的解决办法，解决微信分享链接不能显示缩略，微信分享朋友圈没有获取标题描述，VUE微信分享链接或网站文章到微信朋友圈,缩略图片不显示，h5微信分享只是链接，没有卡片，微信分享网页图标不显示，微信分享链接的缩略图和标题，微信分享链接或网站文章到微信朋友圈，缩略图片不显示解决，如何在微信朋友圈分享网页内容的时候

2 条评论您还未登录，请先登录后发表或查看评论

小程序图片显示不出来怎么解决？

zybijiso666的博客

12-16

1399

获取访问密钥：在图床服务提供商的控制台中，获取访问密钥（Access Key）和访问密钥的秘密（Secret Key）。上传图片：使用图床服务提供商提供的接口、SDK或工具，将图片文件上传到创建的存储空间中。获取图片链接：上传成功后，图床服务将返回一个图片链接（URL），可以用于在网页、论坛等地方显示图片。创建存储空间：登录到图床服务提供商的控制台，创建一个用于存储图片的存储空间（Bucket）。选择图床服务：根据自己的需求选择一家可靠的图床服务提供商，例如七牛云、腾讯云COS、阿里云OSS等。

微信小程序无法显示网络图片，但是浏览器能够正常打开该图片

傻不傻的专栏

11-02

8775

微信小程序无法显示网络图片，但是浏览器能够正常打开该图片。

images：images.weserv.nl的源代码，将在您自己的服务器上使用

02-05

images：images.weserv.nl的源代码，将在您自己的服务器上使用

如何利用图片镜像缓存服务打开被防盗链的图片？

06-28

610

网络中收集的一些图片镜像缓存服务，在很多时候可以起到不错的用途。图像缓存可以用来做什么？可以将有防盗链的图片引用到网页，并成功显示。可以将 http 图片引用到 https 页面而不出现证书问............

小程序图片不显示（在没有错误的情况下）

菜小菜吃菜的博客

09-25

3782

2018年9月20日 小程序中的图片忽然间不显示了，在微信浏览器和其他浏览器中可以显示，百思不得其解。只能用排除法。 1、图片路径、名称去掉中文，特殊符号； 2、图片内存过大； 3、图片尺寸像素过大。经测试， 1、图片名称最好不要代用中文； 2、图片尺寸在高和宽在4千以上在小程序中有可能显示不出来； 3、图片内存过大，会使小程序加载过慢，建议生成缩略图。...

小程序image组件不显示图片？

Dark_programmer的博客

06-22

2388

小程序image组件不显示图片？

小程序后台返回富文本，图片无法显示

weixin_45455635的博客

11-06

938

小程序后台返回富文本，图片无法显示

iOS 社会化分享小程序（解决微信小程序当前页面不可转发）

专注于计算机研发知识和资讯分享

05-21

1836

文章目录引言I 使用友盟分享小程序1.1 集成社会化分享1.2 分享样式设置II 使用微信官方的Open SDK分享小程序2.1 版本选择2.2 集成2.3 用法III 常见问题3.1 Universal Links系统回调失败3.2 小程序分享后为什么图片很模糊？3.3 小程序封面不显示3.4 This app is not allowed to query for scheme weixin 引言系统原生Social Framework和 UIActivityViewController的社会化分享只

解决jupyter notebook显示不全出现框框或者乱码问题

09-17

在使用Jupyter Notebook进行数据分析或编程时，可能会遇到一些显示问题，比如图表显示不全、出现框框，或者中文字符显示为乱码。这些问题通常与环境配置、字体设置以及编码方式有关。以下是一些针对性的解决方案。 ...

终于解决了，微慕小程序不显示图片，原因竟如此简单

小默姐的博客

10-21

1028

前些天我就把小程序的设置、wordpress的后台设置都弄好了，但是小程序里面的文章就是不显示图片，我在网上找了多次，都没有找到解决的办法。今天看到官网的教程中的提示，终于解决了。

uniapp编写微信小程序图片始终不显示

m0_57087617的博客

12-25

1781

一定要仔细检查图片路径是否正确，尤其是要注意看里面有没有包含'\'符号

小程序图片不显示的解决方法

xuemeizeng的博客

10-29

7078

小程序图片不显示的解决方法检查图片命名是否为英文图片是否使用image标签加载的背景图片不能使用本地图片地址图片名有没有空格

微信小程序路径正确但图片无法显示

Alitacc的博客

10-12

2186

解决微信小程序路径正确但图片无法显示问题

微信小程序真机不显示图片【三个解决方案】

最新发布

06-25

<think>我们正在解决用户的问题：网页背景图片在普通浏览器中能显示，但在微信小程序中无法显示。根据引用[1]和[2]，我们注意到在微信小程序中使用背景图片可能会遇到问题。特别是，在微信小程序中，使用本地图片路径作为背景图片时，可能会因为路径问题或小程序的安全策略而无法显示。原因分析：1.微信小程序对本地资源的引用有严格限制。在小程序的WXSS（样式文件）中，不能直接使用本地图片的物理路径（如`../../images/head_bg.png`）。小程序要求将图片放在项目的指定目录（如图片必须放在项目目录下，并且使用相对路径或绝对路径时，必须以`/`开头，或者将图片上传到网络，使用网络URL）。2.小程序中不支持`background-attachment:fixed;`（引用[2]提到在iOS系统中不兼容，实际上在小程序中也不支持这个属性），这可能导致背景图样式失效。3.小程序的样式文件支持的选择器和属性有限，一些CSS属性可能不被支持。解决方案：1.将图片转换为网络资源：将背景图片上传到服务器或使用小程序云开发提供的存储服务，然后使用网络URL（如`https://example.com/images/head_bg.png`）作为背景图片的地址。2.使用base64编码：将图片转换为base64编码，直接在CSS中写入。但注意，这种方法会增加样式文件的大小，适用于小图片。3.使用小程序的image组件：如果背景图片需要覆盖整个屏幕，可以考虑使用image组件，并设置其宽度和高度为100%，然后使用position:absolute;z-index:-1;使其成为背景。但要注意，小程序的页面结构需要调整。4.检查小程序的样式是否支持：避免使用小程序不支持的CSS属性（如`background-attachment:fixed;`）。具体步骤（以使用网络图片为例）：1.将图片上传到服务器或云存储，获取可访问的URL。2.在WXSS文件中，使用这个URL作为背景图片地址：```css.bg{width:750rpx;height:540rpx;background-image:url('https://your-domain.com/images/head_bg.png');background-repeat:no-repeat;background-size:cover;/*或其他适合的尺寸*/}```3.如果使用base64编码（适用于小图片）：```css.bg{width:750rpx;height:540rpx;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAFElEQVR42mP8//8/AzJ8sLWCCiIAF1gKd8p7i7cAAAAASUVORK5CYII=');background-repeat:no-repeat;}```注意事项：-小程序中不支持本地相对路径（如`../../images/head_bg.png`）引用图片（引用[1]中的问题），必须使用网络图片或base64。-小程序中不支持`background-attachment:fixed;`，因此不要使用该属性。如果用户是在小程序中内嵌网页（使用web-view组件），那么网页背景图片的显示问题需要按照网页的标准来解决。但是，根据引用[5]，小程序中通过web-view打开网页时，网页的URL必须是业务域名下，并且背景图片的URL也必须在该域名下或允许跨域访问。总结：小程序中无法显示网页背景图片的主要原因可能是路径引用错误（本地路径不被允许）或使用了不支持的CSS属性。解决方案是使用网络图片或base64编码，并避免使用不支持的CSS属性。生成相关问题：1.微信小程序中如何使用本地图片作为背景？2.微信小程序的WXSS支持哪些CSS属性？3.如何将图片转换为base64编码用于小程序背景？4.微信小程序的web-view组件加载的网页背景图片不显示怎么办？</think>### 微信小程序网页背景图片不显示的原因及解决方案 #### 原因分析： 1. **本地路径限制**：小程序不支持直接使用相对路径引用本地图片（如`../../images/head_bg.png`），这种路径在浏览器有效但小程序会忽略[^1]。 2. **CSS属性兼容性**：小程序部分CSS属性受限，如`background-attachment: fixed`在iOS系统不兼容[^2]。 3. **安全策略限制**：小程序要求所有网络资源必须使用HTTPS协议且域名需配置在业务域名白名单中。 4. **资源加载机制**：小程序对未使用的图片资源会自动优化移除，可能导致背景图丢失。 #### 解决方案： ##### 方法1：使用网络图片（推荐） ```css .bg { background-image: url('https://your-domain.com/images/bg.jpg'); background-size: cover; } ``` **注意**： - 域名需在「小程序后台-开发-服务器域名」中配置 - 必须使用HTTPS协议 ##### 方法2：Base64内嵌图片 ```css .bg { background-image: url('data:image/png;base64,iVBORw0KGgoAAA...'); } ``` **适用场景**：小于50KB的简单背景图 ##### 方法3：使用image组件替代（WXML） ```html <image src="/images/bg.png" mode="aspectFill" style="width:100%;height:100%;position:fixed;z-index:-1" ></image> ``` **优势**：完全兼容小程序资源管理机制 ##### 方法4：云存储解决方案 ```js // 在js中获取云存储URL wx.cloud.downloadFile({ fileID: 'cloud://your-env/bg.jpg', success: res => { this.setData({ bgUrl: res.tempFilePath }) } }) ``` ```css /* WXSS */ .bg { background-image: url('{{bgUrl}}'); } ``` #### 特殊场景处理： 1. **背景图固定问题**： ```css /* 替代background-attachment:fixed */ .bg { position: relative; } .bg::before { content: ''; position: fixed; top:0; left:0; width:100%; height:100%; background-image: url('your-bg'); z-index: -1; } ``` 2. **真机调试不显示**： - 检查图片格式（建议PNG/JPG） - 确保图片尺寸不超过2048px - 在app.json中启用`"style": "v2"`兼容模式 #### 最佳实践： 1. 优先使用网络图片或云存储 2. 复杂背景使用SVG矢量图 3. 动态背景通过wxss动态绑定实现： ```html  <view style="background-image: url('{{dynamicBg}}')"></view> ``` ```js // JS Page({ data: { dynamicBg: 'https://.../bg_season.jpg' } }) ``` > 测试建议：使用开发者工具的「缓存清除」功能（工具栏-缓存-清除文件缓存）可避免旧资源干扰[^5]。