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

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

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

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

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

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

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

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

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

相关·内容

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

,然后用以链接的方式呈现在页面上,而且我们也经常把精力放在项目的打包优化构建上,如何分包,如何抽取第三方库……..有时我们会忘了,图片才是一个网站最大头的那块加载资源(见下图),虽然图片加载可以不不阻碍页面渲染...配置文件中,引入自己需要的插件,使用方法完全相同。...这个现象跟chrome的lazy-loading功能的实现机制有关: 首先,浏览器会发送一个预请求,请求地址就是这张图片的url,但是这个请求只拉取这张图片的头部数据,大约2kb,具体做法是在请求头中设置...HTML中,img的src和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来使用。

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

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

    1.8K10

    浏览器原理学习笔记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相同的业务需要开发两遍。

    1.1K30

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

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

    1.9K90

    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

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

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

    1.5K30

    浏览器架构的温故知新

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

    16210

    「学习笔记」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.3K20

    DOMParser解析TikTok页面中的图片元素

    然而,在Node.js环境中,DOMParser并不是原生支持的。我们可以使用jsdom库来模拟浏览器环境并解析HTML内容。4....处理图片元素提取到图片元素的URL后,我们可以根据需要对这些URL进行进一步的处理。例如,我们可以下载这些图片、将它们保存到本地文件系统、或将它们上传到云服务进行存储和分析。...$$('img'); // 获取页面中的所有img>标签 images.forEach(async (img, index) => { const src = await img.getProperty...('src'); // 获取img>标签的src属性 const srcValue = await src.jsonValue(); // 获取src属性的值 // 打印图片...在解析TikTok页面中的图片元素时,DOMParser可以与Puppeteer等无头浏览器结合使用,以获取渲染后的页面内容并进行解析。

    6800

    WWDC24 - iOS18 下的 WebKit 有哪些更新?

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

    18210

    DOMParser解析TikTok页面中的图片元素

    然而,在Node.js环境中,DOMParser并不是原生支持的。我们可以使用jsdom库来模拟浏览器环境并解析HTML内容。 4....处理图片元素 提取到图片元素的URL后,我们可以根据需要对这些URL进行进一步的处理。例如,我们可以下载这些图片、将它们保存到本地文件系统、或将它们上传到云服务进行存储和分析。...$$('img'); // 获取页面中的所有img>标签 images.forEach(async (img, index) => { const src = await img.getProperty...('src'); // 获取img>标签的src属性 const srcValue = await src.jsonValue(); // 获取src属性的值 //...在解析TikTok页面中的图片元素时,DOMParser可以与Puppeteer等无头浏览器结合使用,以获取渲染后的页面内容并进行解析。

    6100

    (二)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) # 将照片存进本地

    63310

    如何进行渗透测试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 标签的使用

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

    1.1K10

    前端面试那些坑之HTML篇

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

    1.5K90
    领券