img src="#"或者src="" 会发送请求的问题

最新推荐文章于 2024-06-04 22:07:30 发布
原创 最新推荐文章于 2024-06-04 22:07:30 发布 · 1w 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html

本文详细解释了当img标签的src属性为空或为#时，浏览器如何发起请求，并提供了最安全的处理方式。

img的src为空或者#，都会发一次请求，浏览器会用当前路径发起一次请求。



<img src=""> 或者<img src="#">

改为

<img >


是最安全的。

wangjun5159
关注
js 获取 img src 请求地址的响应头 response header，（URL.createObjectURL()、URL.revokeObjectURL()）
zcc的博客
09-26 2672
对象,就是二进制数据,比如通过new Blob()创建的对象就是Blob对象.又比如,在XMLHttpRequest里,如果指定responseType为blob,那么得到的返回值也是一个blob对象.方法会根据传入的参数创建一个指向该参数对象的URL. 这个URL的生命仅存在于它被创建的这个文档里. 新的对象URL指向执行的File对象或者是Blob对象.通过返回的图片二进制数据来创建一个对象URL. 把URL 赋给 img 的 src。指定返回的数据格式为blob二进制数据.
img的src地址是一个请求的方式来显示图片方法
10-20
下面小编就为大家带来一篇img的src地址是一个请求的方式来显示图片方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
src和#src
weixin_34279246的博客
07-31 328
2019独角兽企业重金招聘Python工程师标准>>> ...
vue，请求获取图片code，img中产生两次src获取资源问题
github_39598787的博客
07-25 4302
示例代码： &lt;template&gt; &lt;!-- 1、 --&gt; &lt;img :src="imgUrl + MainImg + '_0x0'" alt="款式主图" v-if="MainImg != ''"&gt; &lt;!-- 2、&lt;table class="table-content" v-if="lis
[转] img的src通过请求的方式来显示图片
luciferyyw的博客
06-06 1万+
原文链接：http://blog.youkuaiyun.com/kouwoo/article/details/50015693 1.jsp [html] view plain copy  print? img alt="test" src="getImg2.do">   2.controller
img标签src为空引发两次请求页面的问题
yiluoAK_47的专栏
04-30 5532
最近一直在asp.net mvc下开发网站，今天碰到了很让人郁闷的问题。 我一个Controller里的 action在页面加载时被调用了2次。 起初怀疑JS问题，但屏蔽调JS后，问题依旧。没办法，把页面里的内容分别屏蔽的找了半天原 因，最终发现是因为 页面含有一个。src="">引发的问题" src="http://simg.sinajs.cn/blog/images/face/026.g
在html的img src=""中调用js函数或js变量来动态指定图片路径
09-28
在这种情况下，你可以使用`fetch`或`XMLHttpRequest`发送请求，然后将返回的URL设置给`src`： ```html <img id="imgInit" alt="海边风情"> fetch(&#39;api/getImagePath&#39;) .then(response => response.text()) ....
JSP结合js实现img中src更新请求的方法
10-23
`changeImage`函数通过改变img标签的`src`属性，触发浏览器重新向服务器发送请求，服务器端的`registerImage`或`registerImage2`方法则负责生成新的验证码并返回。 总结来说，这个例子展示了如何利用JavaScript和...
Vue.js 动态为img的src赋值方法
11-28
在Vue.js中，动态地为`<img>`标签的`src`属性赋值是一个常见的需求，尤其是在处理异步数据或者根据条件展示不同图片时。在给出的场景中，我们需要根据`data.List`中的`sex`字段（性别）来决定图片的路径。下面将详细...
关于vue v-for循环解决img标签的src动态绑定问题
10-18
在动态绑定<img>标签的src属性时，通常会遇到路径和上下文环境的问题。这主要是因为浏览器在加载图片时，需要根据当前页面的相对路径或者绝对路径来寻找资源。如果路径设置错误，浏览器无法找到资源，就会导致图片...
img src=“#"导致重复请求
马旭的专栏
04-30 814
img src=“#"导致重复请求 科学无法解释。 参考：http://qsfwy.iteye.com/blog/625565
＜iframe＞标签src属性“#“与““的区别
lena blog
05-24 1217
<iframe>标签用于引入一个新页面。 “#”表示当前页面（在<a>标签中的href属性中#+id又可用于定位同一页面的id标签所在位置） “”表示空白页 测试代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body>
[JavaWeb]_[初级]_[img标签的值为#时导致重复访问当前页面]
小白
12-19 391
场景 在开发网站时，可能会遇到调试一个URL逻辑时，这个URL被调用了两次，怎么回事？ 有些图片需要延迟加载. 那么src值会设置为#值，这会有什么坏处？ 说明 URL被凋用两次，其实就是和<img src="#">标签的src值设置为#的原因。大多数的html标签，如果值是#，那么就会访问当前的URL网址. 比如<a href="#">标签，点击的时候其实就是访问当前页面. 而<img>在网页加载时会自动访问src里的网址，因此也就是会再访问一次当前网页。
img标签突然发送请求问题
元元猿的博客
06-04 334
在做项目过程中突然出现一个发送请求的报错404，一直找不到哪里调的这个接口，后来将代码一段一段注释测试出 是img标签导致发送请求。在数据接口未返回数据前，img的src被初始化为一个空对象，导致调用当前路径+object。img的src设置一个初始值，或者在数据未返回前，不设置img标签的src属性。img的src为空或者为#时，都会发起一次请求，浏览器会用当前路径发起一次请求。
# 前端图片用src 发送请求 后端回显图片
贪无忧"的博客
07-15 2917
在前端通过img图片 的src 发送请求，后端回显图片
游览器发送图片请求问题
菜鸟腾飞
08-27 2万+
基于以下 HTML结构，判断浏览器会发送多少个图片请求？ 一共3次
关于路径src=“ “目录的表示方法（相对路径和绝对路径详细用法）
热门推荐
Hrenhua的博客
03-11 2万+
在web开发和java动态工程开发的过程中，我们难免遇到目录的路径问题的困扰，今天我给大家和自己总结了一下，资源引用中src="**"的表示方法，在IDEAL,和eclipse,和WebStorm开发中都适用。 在Web开发中，一般资源引用都要用src=URL,来导入我们的资源，如html中的img的用法，<img src="*.jpg"> 下面是一些目录的表示方法： 1、如果是在当前目录：（相对路径） URL=“资源” 即可 比如，我在写的3-11-1.html文件，要导入jq里面的包，3-
HTML的学习记录
Yoin.
12-27 1389
html5的基础知识
zzy：请求静态资源和请求动态资源， src再次请求服务器资源
weixin_30823833的博客
03-28 245
【总结可以发起请求的阶段：请求动态资源：通过web.xml匹配action然后，自定义Servlet处理该action1）form表单提交请求的时候，用action设定，该页面发起请求的Servlet，（也就是点击form表单的提交发出请求，请求由设定的action处理）2）js中获取xmlHttpRequest对象，由该对象发出请求，[包括，请求路径，设定处理的action，] 请求静态资源：...
html标签<img src="" >当中的src属性代表什么
最新发布
06-08
<think>我们正在讨论HTML中的img标签的src属性，这是一个基础但重要的知识点。根据引用[1]和引用[2]，以及我对HTML的理解，src属性用于指定图像的URL（即图像的位置）。引用[1]展示了在JSX（React的语法扩展）中如何通过require来获取图片的模块化引用，然后将该引用赋值给src属性。引用[2]则提到了在实际项目中，我们通常会把图片放在单独的目录中（例如images），然后在src属性中通过路径来引用它。因此，我们可以这样回答：HTMLimg标签的src属性（source的缩写）用于指定要显示的图像的URL（统一资源定位符）。这个属性是必须的，因为它告诉浏览器在哪里找到图像文件。具体作用包括：1.定义图像的来源：可以是相对路径、绝对路径，或者完整的URL（包括协议和域名）。2.支持多种协议：如http、https，以及本地文件系统（file://，但出于安全考虑，现代浏览器通常限制本地文件的使用）。3.支持各种格式：如JPEG、PNG、GIF等。接下来，我们可以分点详细说明，并给出示例。同时，为了帮助用户更好地理解，我们还可以解释一下相对路径和绝对路径，因为引用[2]提到了图片存储的目录结构。最后，根据要求生成相关问题。</think> ### HTML img 标签 src 属性的作用详解 `<img>` 标签的 `src`（source 的缩写）属性是 HTML 中**最核心的图像属性**，用于指定浏览器应加载和显示的图像资源位置。其主要作用包括： #### 1. **图像资源定位** `src` 属性定义了图像的**源文件路径或 URL**。浏览器通过该值确定从何处获取图像数据： ```html <!-- 相对路径示例 --> <img src="images/photo.jpg"> <!-- 绝对 URL 示例 --> <img src="https://example.com/images/logo.png"> ``` 引用[^2]提到实践中常将图像存储在 `/images` 或 `/pics` 等专用目录，简化路径管理。 #### 2. **资源加载触发** 当浏览器解析到 `src` 属性时： - 立即发起 HTTP 请求获取图像 - 自动处理图像解码和渲染 - 支持渐进式加载（先显示模糊预览再清晰化） #### 3. **路径格式支持** 支持多种资源定位方式： | 路径类型 | 示例 | 适用场景 | |-------------------|------------------------|----------------------------| | **相对路径** | `../assets/icon.png` | 项目内部资源引用[^2] | | **绝对 URL** | `https://cdn.com/1.jpg`| 外部 CDN 资源 | | **Base64 编码** | `data:image/png;base64,...`| 小型内嵌图像 | | **模块化引用** | `src={importedImage}` | React 等框架的组件化方案[^1] | #### 4. **现代开发实践** 在框架环境中（如 React）： ```jsx // 通过 require 或 import 预处理图像 const icon = require(&#39;@/assets/icon.png&#39;); function Component() { return <img src={icon} alt="图标"/>; // src 接收预处理路径[^1] } ``` 这解决了传统路径引用在模块打包时的路径解析问题。 #### 5. **技术特性** - **必需属性**：缺少 `src` 会导致 `<img>` 变为无内容的替换元素 - **资源验证**：浏览器对无效路径返回 HTTP 404 错误 - **加载优化**：配合 `srcset` 实现响应式图像适配 - **跨域控制**：受 CORS 策略限制（需配置 `crossorigin` 属性） ### 核心要点总结 `src` 的本质是建立 **资源标识符（URI）** 与 **图像渲染管线** 的桥梁，它决定了： 1. 图像从哪里加载（$( \text{资源位置} $) 2. 如何加载（$( \text{协议/路径策略} $) 3. 与当前页面的关系（$( \text{同源/跨域} $)
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值