首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么chrome浏览器不渲染img src "URL“,而是在本地存储中渲染相同的照片?

Chrome浏览器不渲染img src "URL",而是在本地存储中渲染相同的照片的原因是因为浏览器的安全策略和隐私保护机制。

当浏览器加载一个网页时,其中的img标签会请求指定URL的图片资源并进行渲染。然而,由于安全性和隐私问题,浏览器限制了跨域资源的加载和显示。跨域资源是指来自不同域名或协议的资源。

如果img标签的src属性指向的URL与当前网页的域名或协议不一致,浏览器会拒绝加载该图片资源,以防止恶意网站通过加载外部资源获取用户隐私信息或进行其他攻击。这就是为什么Chrome浏览器不渲染img src "URL"的原因。

为了解决这个问题,可以将图片资源下载到本地存储中,然后通过本地路径来渲染图片。这样做的好处是可以避免跨域资源加载的限制,同时提高了网页加载速度和用户体验。

然而,这种做法也存在一些问题。首先,如果图片资源发生更新,本地存储中的图片无法自动更新,需要手动更新才能显示最新的图片。其次,本地存储中的图片会占用用户设备的存储空间,对于设备存储空间有限的情况下可能会造成不必要的浪费。

综上所述,Chrome浏览器不渲染img src "URL"而是在本地存储中渲染相同的照片是为了保护用户隐私和提高网页加载速度,但同时也带来了一些更新和存储管理的问题。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

谈谈Web应用图片优化技巧及反思

,然后用以链接方式呈现在页面上,而且我们也经常把精力放在项目的打包优化构建上,如何分包,如何抽取第三方库……..有时我们会忘了,图片才是一个网站最大头那块加载资源(见下图),虽然图片加载可以阻碍页面渲染...配置文件,引入自己需要插件,使用方法完全相同。...这个现象跟chromelazy-loading功能实现机制有关: 首先,浏览器会发送一个预请求,请求地址就是这张图片url,但是这个请求只拉取这张图片头部数据,大约2kb,具体做法是在请求头中设置...HTMLimgsrc和css样式background-image都可以接受base64字符串,从而在页面上渲染出对应图片。...第二、让浏览器资源缓存策略功亏一篑 假设你base64Url会被你应用多次复用,本来浏览器可以直接从本地缓存取出图片,换成base64Url,将造成应用多个页面重复下载1.3倍大小文本,假设一张图片是

2K20

Web页面全链路性能优化指南

浏览器进程 负责界面展示、用户交互、子进程管理、提供存储渲染进程 每个页面都有一个单独渲染进程,用于渲染页面,包含webworker线程 网络进程 主要处理网络资源加载(HTML、CSS、JS、IMAGE...、AJAX等) GPU进程 3D绘制,提高性能 插件进程 chrome插件,每个插件占用一个进程 输入url到页面展示完整过程 图1 用户输入 用户浏览器进程输入并按下回车健后,浏览器判断用户输入...但一个TCP连接同一时间只能发送一个HTTP请求,为了阻塞多个请求,Chrome允许创建6个TCP连接,所以HTTP/1.1,最多能够同时发送6个网络请求。...,Chrome这些指标应该怎么获取。...可以本地安装命令行工具来使用,也可以通过Chrome来使用。

61811
  • Web页面全链路性能优化指南

    浏览器进程 负责界面展示、用户交互、子进程管理、提供存储渲染进程 每个页面都有一个单独渲染进程,用于渲染页面,包含webworker线程 网络进程 主要处理网络资源加载(HTML、CSS、JS、IMAGE...、AJAX等) GPU进程 3D绘制,提高性能 插件进程 chrome插件,每个插件占用一个进程 输入url到页面展示完整过程 图1 用户输入 用户浏览器进程输入并按下回车健后,浏览器判断用户输入...但一个TCP连接同一时间只能发送一个HTTP请求,为了阻塞多个请求,Chrome允许创建6个TCP连接,所以HTTP/1.1,最多能够同时发送6个网络请求。...,Chrome这些指标应该怎么获取。...可以本地安装命令行工具来使用,也可以通过Chrome来使用。

    1.7K10

    浏览器原理学习笔记07—浏览器安全

    例如通过网络劫持(WiFi 路由器劫持、本地恶意软件劫持等)页面传输过程修改 HTML 内容。...现代浏览器 安全沙箱 利用操作系统提供安全技术将渲染进程和操作系统隔离,渲染进程执行过程无法访问或修改操作系统数据,因此用户将无法获取渲染进程之外任何操作权限。...2.3 安全沙箱与操作系统交互 由于渲染进程采用安全沙箱,所以渲染进程内部不能与操作系统直接交互,于是浏览器内核实现了持久存储、网络访问和用户交互等与操作系统交互功能,通过 IPC 与渲染进程交互...Chrome 几年前开始重构代码,严格按照 同一站点(根域名+协议相同,区别于同源)策略分配渲染进程。...注意: 这里 CA 公钥不是当前证书公钥,而是颁发证书 CA 公钥,CA 证书一般随同当前网站证书部署服务器;若未部署则浏览器通过网络下载,一般推荐。

    1.7K218

    如何全链路进行前端性能优化

    图片格式介绍 jpeg:一种针对彩色照片而广泛使用有损压缩图形格式。是一种栅格图形,常用文件扩展名为jpg,jpeg,jpe。互联网上常被应用于存储和传输照片。...一般我们会把img标签src属性设置为空字符串,真实图片地址放在data-lazy,当页面scroll到对应位置时再通过DOM操作将src值替换为data-lazy值。...简单来说就是讲所需要资源提前加载到浏览器本地,后面需要时候可以直接从浏览器缓存获取,而不用再重新开始加载。好处是减少用户后续加载资源等待时间。...最终这个包会解压释放在内存里面,当webview加载url时候会直接从内存里面读取,如果能读取到就加载内存页面数据进行展示,假设读取不到也就是说本地没有这个业务就会使用线上url地址让页面加载就可以了...为什么会有RN其实是因为应用商店发版问题,每一次发版都需要审核,可能审核不通过,而且安卓可能要发布多个商店,还有两端研发不同步问题,也就是安卓和ios相同业务需要开发两遍。

    1K30

    web图像常见应用策略与技巧

    : image-set(url(test.jpg) 1x,url(test2.jpg) 2x); 1.2固定尺寸图像 与内容相关图片,需要响应式时候,它们大小往往并不是不变,会随viewport...最后一个src作为默认图像url引入,并且是天然回退方案,当浏览器不认识以上属性时候,直接读取src渲染。 这样说不够直观,我们看个demo ?...iphone4(320)下,图像宽度和我们设置100vw一致,但是为什么浏览器选择了768图像而没有选择360?因为4dpr是2呀^_^,浏览器很智能选择了质量最合适768....浏览器仍然需要img元素,用来表明需要加载图片,如果没有img,那么什么都不会渲染。source为浏览器提供了要显示图像供选版本。...source type="image/svg+xml" srcset="svg.svg">     支持浏览器里使用SVG,不支持浏览器里显示

    1.6K10

    web图像常见应用策略与技巧

    : image-set(url(test.jpg) 1x,url(test2.jpg) 2x); 1.2固定尺寸图像 与内容相关图片,需要响应式时候,它们大小往往并不是不变,会随viewport...最后一个src作为默认图像url引入,并且是天然回退方案,当浏览器不认识以上属性时候,直接读取src渲染。 这样说不够直观,我们看个demo ?...iphone4(320)下,图像宽度和我们设置100vw一致,但是为什么浏览器选择了768图像而没有选择360?因为4dpr是2呀^_^,浏览器很智能选择了质量最合适768....浏览器仍然需要img元素,用来表明需要加载图片,如果没有img,那么什么都不会渲染。source为浏览器提供了要显示图像供选版本。...有一些图像格式较小文件大小情况下保证了较好图片质量。听起来还不错,但残酷事实是没有一个新格式被所有浏览器支持。谷歌WebP表现不错,但只有Chrome和Opera原声支持。

    1.8K90

    web图像常见应用策略与技巧

    : image-set(url(test.jpg) 1x,url(test2.jpg) 2x); 1.02 固定尺寸图像 与内容相关图片,需要响应式时候,它们大小往往并不是不变,会随viewport...最后一个src作为默认图像url引入,并且是天然回退方案,当浏览器不认以上属性时候,直接读取src渲染。...这样说不够直观,我们看个demo iphone4(320)下,图像宽度和我们设置100vw一致,但是为什么浏览器选择了768图像而没有选择360?...浏览器仍然需要img元素,用来表明需要加载图片,如果没有img,那么什么都不会渲染。source为浏览器提供了要显示图像供选版本。...src="360.jpg" alt=""> 本例,当viewport大于960像素时,会加载图像960图像。

    1.6K30

    现代图片性能优化及体验优化指南

    浏览器会选择最匹配子 元素,如果没有匹配,就选择 元素 src 属性 URL。然后,所选图像呈现在 元素占据空间中。 什么意思呢?...如果浏览器能够渲染 WebP 图像,它将使用该图像文件。 否则浏览器将回退到使用 img 元素 src 属性图像文件。img 元素指向是 JPEG 格式图片,它是最终兜底方案。...由浏览器决定哪种方式更适合用户。 上文其实也提及了,浏览器进行图片渲染展示过程,是需要对图片文件进行解码,这一个过程快慢与图片格式有关。...而如果我们希望图片渲染解码影响页面的其他内容展示,可以使用 decoding=async 选项,像是这样: 这样,浏览器便会异步解码图像...早年间, 等替换元素是没有伪元素,后面 Chrome/Firefox 浏览器逐渐支持了当, src 拉取失败时,支持 元素伪元素展示,这才有了上述方案,但是,目前

    1.5K30

    浏览器架构温故知新

    在网络安全领域,沙箱分析并执行潜在恶意代码,检测并减轻威胁。 近期 Chrome 浏览器,其架构由关键进程组成,如下图所示: 浏览器进程管理界面显示、用户交互、子进程协调和提供存储功能。...强大硬件上,与浏览器进程相关联服务单独进程运行。功能不太强大硬件上,这些服务相同进程运行,有效地减少了内存使用。 2....浏览器进程通过进程间通信将 URL 请求传送给网络进程。 网络进程检查请求资源本地缓存,如果找到该资源,则将其返回给浏览器进程。...关键阶段包括 HTML 解析、 CSS 样式设计、布局创建和绘制,具体步骤如下: 用户输入ーー浏览器地址栏输入 URLURL 解析ーー解析 URL 以标识协议、主机、端口和路径。...同时,存储进程为插件提供了本地存储功能,使用chrome.storage.localchrome扩展本地存储和检索数据。

    14610

    「学习笔记」HTML基础

    chrome Chromium/Blink Chromium 项目中研发 Blink 渲染引擎(即浏览器核心),内置于 Chrome 浏览器之中。Blink 其实是 WebKit 分支。...从浏览器输入 URL 到页面渲染整个过程都是由 浏览器架构各个进程之间配合完成。...连接 - 提供新方式与服务器通信。 离线和存储 - 允许网页本地存储数据并有效地离线运行。...浏览器html头部加上manifest属性,如果是第一次访问浏览器会根据manifest内容进行下载存储离线内容,如果已经访问过则从离线存储中进行加载,然后比对服务器如果有新内容更新离线存储...2、src是指向外部资源位置,指向内容将会嵌入到文档当前标签所在位置;在请求src资源时会将其指向资源下载并应用到文档内,例如js脚本,img图片和frame等元素。

    3.7K20

    前端性能优化

    下面的截图显示了 1300 个框上使用浮动布局开销: 然后我们用 flexbox 来重现这个例子: 现在,对于相同数量元素和相同视觉外观,布局时间要少得多(本例为分别 3.5 毫秒和 14...如果可以把相同首部存储起来,仅发送它们之间不同部分,就可以节省不少流量,加快请求时间。...HTTP/2 客户端和服务器端使用“首部表”来跟踪和存储之前发送键-值对,对于相同数据,不再通过每次请求和响应发送。如果服务器收到了请求,它会照样创建一张表。...vue 项目中除了可以 webpack.base.conf.js url-loader 设置 limit 大小来对图片处理,对小于 limit 图片转化为 base64 格式,其余不做操作。...('img') img.src = img.dataset.src 这样图片就加载出来了,完整代码可以看一下参考资料。

    1.2K20

    WWDC24 - iOS18 下 WebKit 有哪些更新?

    它能让你向浏览器明确表达,页面的某些部分可能最初不在屏幕上,建议先忽略它们,从而参与首屏布局和渲染,这样可能会使页面加载更快。...Web API - 空间照片 Apple Vision Pro 上,我们可以享受到一种体验非常好浏览空间照片和全景照片功能。...当你 visionOS 打开 Photos 应用时,你会看到一组你照片集合。点击一张图片,它就会在你面前一个浮动框架单独出现,而其他部分应用则会消失。...首先,我们可以使用简单 HTML 将扁平化全景照片嵌入网页。...不过这项能力 Chrome 早就提供了,可以看下我之前文章:Chrome 81 正式发布 !

    12410

    (二)selenium实际运用

    ,因为这个网站也是可以用xpath,具体步骤是: F12,小箭头,点击搜索框 点击后,找到元素位置,右键,复制,复制xpath 进入pycharm之前创建py文件添加如下代码 driver.find_element_by_xpath...('//*[@id="domesticDiv"]/dl[1]/dd/input').clear()# 将搜索框内容清理 搜索框添加“鹤壁市” driver.find_element_by_xpath...分析网页,找到详情页url 我们可以这样做: 我们发现,这个详情页每个xpath都不相同,怎么做到把所有详情页都“照顾”得到呢?.../@src') # 照片 weizhi = ht_data.xpath('//*[@id="map"]/div[1]/div[2]/div[1]/div/div[9]/div[2...酒店数据//{name}//{name, num + 1}.jpg', 'wb') as f: f.write(requests.get(photo).content) # 将照片存进本地

    60910

    如何进行渗透测试XSS跨站攻击检测

    是否同源由URL决定,URL由协议、域名、端口和路径组成,如果两个URL协议、域名和端口相同,则表示他们同源。...3.2.2.1.1. file域同源策略 之前浏览器,任意两个file域URI被认为是同源本地磁盘上任何HTML文件都可以读取本地磁盘上任何其他文件。...跨源数据存储访问 存储浏览器数据,如 localStorage 和 IndexedDB,以源进行分割。每个源都拥有自己单独存储空间,一个源Java脚本不能对属于其它源数据进行读写操作。...字段,那么浏览器就认为X-XSS-Protection配置为1,这是浏览器默认设置 1; mode=block: 如果检测到恶意代码,渲染恶意代码 FireFox没有相关保护机制,如果需要保护...基于存储 有时候网站会将信息存储Cookie或localStorage,而因为这些数据一般是网站主动存储,很多时候没有对Cookie或localStorage取出数据做过滤,会直接将其取出并展示页面

    2.7K30

    现代图片性能优化及体验优化指南 - 图片类型及 Picture 标签使用

    图片资源,我们业务可谓是占据了非常大头一环,尤其是其对带宽消耗是十分巨大。 对图片性能优化及体验优化今天就显得尤为重要。...即用一个数字来代表(索引)一种颜色,存储图片时候,存储一个数字组合,同时存储数字到图片颜色映射。这种方式只能存储有限种颜色。...浏览器会选择最匹配子 元素,如果没有匹配,就选择 元素 src 属性 URL。然后,所选图像呈现在 元素占据空间中。 什么意思呢?...如果浏览器能够渲染 WebP 图像,它将使用该图像文件。 否则浏览器将回退到使用 img 元素 src 属性图像文件。img 元素指向是 JPEG 格式图片,它是最终兜底方案。...这意味着现在我们可以牺牲向后兼容性情况下开始使用新图像格式。

    1.1K10

    前端面试那些坑之HTML篇

    (2)、标准模式排版和JS运作模式都是以该浏览器支持最高标准运行。兼容模式,页面以宽松向后兼容方式显示,模拟老式浏览器行为以防止站点无法工作。 2、HTML5为什么只需要写<!...浏览器内核不同对于网页语法解释会有不同,所以渲染效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容应用程序都需要内核。...绘画 canvas; 用于媒介回放 video 和 audio 元素; 本地离线存储 localStorage 长期存储数据,浏览器关闭后数据丢失; sessionStorage...,那么就会重新下载文件资源并进行离线存储。...cookie数据始终同源http请求携带(即使不需要),记会在浏览器和服务器间来回传递。 sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。

    1.5K90
    领券