关于HTML背景图片无法正常加载问题的解决（报错：Failed to load resource: net::ERR_BLOCKED_BY_CLIENT）

已于 2022-02-21 11:25:49 修改
阅读量3.4k 收藏 2
点赞数 3
分类专栏： 前端经验笔记 文章标签： html 前端 css
于 2022-02-21 11:09:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34422681/article/details/123042703
版权

首先是问题描述

使用HTML编写网页的过程中，我们在<div>标签，或者<body>标签中添加background属性以此达到显示网页背景的目的。但有的时候背景图片无法加载，如图所示：
缺少背景的网页
当我们按下F12查看浏览器工具的时候发现我们的背景图片地址可以正常访问：
背景图片
同时html文件中background属性也是生效的：
属性图片

然后是报错

我们在浏览器自带的工具中可以发现这样的报错：
报错图片
报错

报错重点：

Failed to load resource: net::ERR_BLOCKED_BY_CLIENT

解决方案

这个问题是由于浏览器或浏览器上安装的第三方插件将背景图片拦截产生的，将相关设置关闭即可：
第三方插件
在这里插入图片描述

在这里插入图片描述

匠师
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
浏览器全屏显示背景图片的css样式与html结构
09-25
全屏显示背景图片，在某些时候非常需要，那么如何实现浏览器全屏显示呢？下面有个不错的示例，感兴趣的朋友可以参考下
解决vue net :ERR_CONNECTION_REFUSED报错问题
10-14
在开发Vue应用时，开发者可能会遇到“net :ERR_CONNECTION_REFUSED”错误，这通常表示浏览器无法连接到指定的服务器。这个错误可能出现在多种场景下，...希望这些信息能帮助开发者更好地理解和解决问题，提升开发效率。
Edge控制台报错：Failed to load resource: net::ERR_BLOCKED_BY_CLIENT
有事儿私信。
03-08 4924
在Edge跑新建的本地项目时，控制台报错：Failed to load resource: net::ERR_BLOCKED_BY_CLIENT
html to image
yz18931904的博客
01-13 1076
<dependency> <groupId>gui.ava</groupId> <artifactId>html2image</artifactId> <version>0.9</version> </dependency> HtmlImageGenerator imageGenerator = new HtmlImageGenerator(); imageGenerator.loa..
img图片加载出错处理（转载）
03-07 353
为了美观当网页图片不存在时不显示叉叉图片当在页面显示的时候，万一图片被移动了位置或者丢失的话，将会在页面显示一个带X的图片，很是影响用户的体验。即使使用alt属性给出了”图片XX”的提示信息，也起不了多大作用。其实，可以这样处理：当图片不存在的时候，会触发onerror事件，我们可以在该事件中做一下补救的工作，比如： 1、让这个图片元素隐藏： <img src="图片...
Thymeleaf的使用——关于Controller跳转页面使用时，背景图片等资源加载错误问题的解决
m0_51743237的博客
05-12 779
Thymeleaf的使用——关于Controller跳转页面使用时，背景图片等资源加载错误问题的解决
打开html文件背景图片报错 Failed to load resource: net::ERR_BLOCKED_BY_CLIENT
Ctrlccv的博客
02-26 3728
用vscode预览网页没啥问题 但是直接到文件夹下打开html文件 图片和字体样式就报错 看到这BUG我气得浑身发抖，大热天的全身冷汗手脚冰凉，这个社会还能不能好了，我们秃头佬到底要怎么活着BUG才满意，眼泪不争气的流了下来，这个世界到处充斥着对菜鸡程序猿的压迫，本菜鸡何时才能真正的站起来。地狱空荡荡，魔鬼在人间！ 脚也抖了，泪也流了。 写代码我唯唯诺诺，对BUG还是得重拳出击，网上找了半天 ...
解决：DevTools failed to load SourceMap：… net::ERR_HTTP_RESPONSE_CODE_FAILURE的问题
01-08
在Google chrome开发人员控制台中...先说解决方案： 第一种： 在Google chrome浏览器调试工具中，设置该调试工具，点开之后选择Settings 关闭此选项 原创文章 21获赞 1访问量 1583 关注 私信 展开阅读全文 作者
解决Chrome在新版MacOS上报错 NET::ERR_CERT_WEAK_KEY 的问题
10-15
主要介绍了解决Chrome在新版MacOS上报错 NET::ERR_CERT_WEAK_KEY 的问题,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
WebApi 跨域问题解决方案：CORS
07-23
同源策略：出于安全考虑，浏览器会限制脚本中发起的跨站请求，浏览器要求JavaScript或Cookie只能访问同域下的内容。...因为我们的WebApi和MVC是两个不同的项目，所以运行起来之后就存在上面说的跨域的问题。
angular 打包后 index.html 显示Failed to load resource: net::ERR_FILE_NOT_FOUND
u011342224的博客
08-13 1651
Q：run build 之后找不到 .js 资源文件 A： 打包时在ng build后加上–base-href ./
解决Failed to load resource: net::ERR_BLOCKED_BY_CLIENT
SuperBetterMan的博客
10-09 3325
自学了电商项目，在开发前台页面，遇到了上面问题 大概意思是资源打不开，翻译了一下，直接解决好多事。 这个意思就是能从后台获取到，但是被客户端拒绝了。这是为什么呢？ 原来是我的浏览器装有免广告的插件 解决办法:把插件先暂停一下，或者设置白名单 ...
样式化加载失败的图片
weixin_30237281的博客
02-20 174
本片文章翻译自 Styling Broken Images 翻译过程中可能会在原意不变的基础上有些细微改动，望读者见谅 加载失败的图片是比较丑陋的，比如 但是我们可以让结果变得更美好。通过给元素设置CSS相关属性可以实现更美的呈现。 IMG元素你需要知道的两点知识 我们可以针对IMG元素设置排版相关的CSS样式（诸如font等属性）。一旦IMG的可替换文本（即alt属性）出现，则设置的CSS样...
chrome控制台报Failed to load resource: net::ERR_BLOCKED_BY_CLIENT的解决办法之一
mufeng2015的博客
05-26 2万+
问题描述：自己的本地项目在chrome上打开时，一些本图片未能显示，但是chrome可以通过路径访问到该图片。控制台报Failed to load resource: net::ERR_BLOCKED_BY_CLIENT错误可能原因：自己安装的去广告插件拦截了相关图片解决办法：为当前项目页面设置白名单以“广告终结者”为例：1、打开“广告终结者”设置选项2、进入“网站白名单”，添加项目域名。如果是本...
使用JS判断css设置的背景图是否加载成功
weixin_42429288的1博客
04-17 1342
如果你也遇到过类似的问题，希望小菜鸟的这篇文章能帮到你 原本需求是，点击小标题，切换背景图， 因为使用vue技术栈，所以我的解决方案是在data中require所有背景图，然后在小标题的点击事件中修改style 结果是效果出来了，但是切换的时候会出现瞬间的空白。 最终解决了这个瞬间空白问题-----使用img的complete属性 核心代码部分如下 在vue的data中 imgArr...
React | build后打开index.html空白Failed to load resource: net::ERR_BLOCKED_BY_CLIENT
u011607490的博客
10-14 3253
 打开config/paths.js, 搜索“pathname”，在斜杠前加一个点
关于html中img标签无法加载图片
m0_60435649的博客
10-15 2万+
html：w3school 在线教程 如题，本来想用<img>标签显示图片，但是始终无法加载出图片，显示结果如下： <html><head></head><body> <img src='w3school.jpg' width='104' height='142'/> </body></html> 网上有些说是要在<head>标签中加入<meta name="referrer...
HTML中的img标签无法显示图片的解决方案
热门推荐
学习记录
08-24 4万+
用HTMl编写jsp文件，想用img标签显示一张本地图片，确定路径无误，图片真实存在，但就是无法在浏览器中显示，显示效果为一片空白。 从网上搜了各种方法，有说文件路径写法不对的，应该写成file:///+磁盘路径，最后发现是因为我的图片路径用了绝对路径导致的。 解决方案： 将需要显示的图片放到和jsp文件相同的文件夹下，如下图所示，我的jsp文件名为index，要显示的图片名为GOPRO288...
html img加载失败，怎样替换为默认图片
清湮沐的博客
12-14 2万+
img元素加载图片失败，则变成一个小图标，让页面变得难看。此时如何替换为默认图片？ onerror属性 img元素自带onerror属性，加载失败时，触发error事件 src="http://yongqing.is-programmer.com/posts/image.gif" onerror='this.src="http://yongqing.is-programmer.com/po
Failed to load resource: net::ERR_BLOCKED_BY_CLIENT
最新发布
11-21
"Failed to load resource: net::ERR_BLOCKED_BY_CLIENT"错误通常是由于浏览器的安全设置或插件阻止了资源的加载。这可能是由于以下原因导致的： 1.浏览器插件阻止了资源的加载； 2.浏览器的安全设置阻止了资源的加载； 3.网络连接问题。 解决方案如下： 1.检查浏览器插件是否阻止了资源的加载，可以尝试禁用浏览器插件或更换浏览器； 2.检查浏览器的安全设置，可以尝试降低浏览器的安全级别或添加网站到信任列表； 3.检查网络连接是否正常，可以尝试重新连接网络或更换网络环境。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

匠师

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值