怎么在html的<img src="">src的值这里调用js方法或变量获取图片地址

最新推荐文章于 2025-05-27 21:49:35 发布
原创 最新推荐文章于 2025-05-27 21:49:35 发布 · 1.1w 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种使用JavaScript动态加载图片的方法，并提供了具体的HTML与JavaScript代码实现。通过设置图片元素的src属性，可以实现网页中图片的动态加载。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<html>

<head>参考自

</head>

<body>

<img src="?"  id="img">

</body>

<script language="javascript">

var adres="图片地址";

document.getElementById('img').src = adres;

</script>

</html>

参考自https://bbs.youkuaiyun.com/topics/390732020/ 

html img调用js,html调用js变量 如何在html中输出js文件中的变量
weixin_35379520的博客
06-04 3367
html页面代码中怎么调用js变量？html页面代码中怎么调用js变量，例如 在html代码中插入js代码: a=取浏览你把index1.js 中的onReady 去掉，把index1.js改成 function index1() { 请确定他们在一个文件夹下，然后就可以直接调用了 直接把两段代码合并 。 希望能给你帮助。要实现这么个功能在html中显示两个图片来动态显示日期，因为是html是不 ...
在html页面用ajax的简单应用通过javascript得到数据库中的图片路径并在表格中显示出来
tianxinggao的专栏
02-02 3629
 Jscript代码：function getHTTPObject()           ...{                                 var http;          var browser = navigator.appName;          if(browser == "Microsoft Internet Explorer")        
在html的img src=""中调用js函数或js变量来动态指定图片路径
09-28
正如标题所言，如何调用js的函数或者js变量来指定图片路径，此种需求特别适合在某些特殊的情况下，这里有几个方法，在实验中,需要的朋友可以参考下
在html的<img src="">中调用js的函数或者js变量来指定图片路径
wangdao1212的专栏
04-08 3803
这个问题找了很多网络资源，这里有几个 ，这样就能调用JS的函数NextPic（）了。
vue使用图片的四种类型
weixin_42339193的博客
05-27 843
本文总结了Vue项目中图片加载的6种实现方式：1）静态图片使用普通img标签；2）动态图片使用:src绑定；3）webpack打包图片通过require引入；4）封装自定义图片组件处理加载状态；5）SVG矢量图标直接引入或使用组件；6）性能优化采用懒加载技术。文章详细介绍了每种方式的特点、适用场景和具体实现代码，并对比了不同场景下的推荐写法，为Vue项目中的图片处理提供了全面的解决方案。
html<img>标签中src=“图片路径”，怎么用变量替换路径
热门推荐
lovewingss的博客
03-29 4万+
bg0.gif~bg5.gif fChBg=function(szID){ var dwMax=5; //定义图片上限0~5 var szPic="bg";//定义图片名前缀 var szExt="gif";//定义图片后缀 document.getElementById(szID).style.backgroundImage="url("+szPic+Math.floor(Ma
JavaScript正则表达式替换字符串中图片地址(img src)的方法
10-20
在处理HTML字符串时，我们可能需要替换其中的图片地址（img标签的src属性）。本篇文章将深入探讨如何使用JavaScript正则表达式来实现这个功能。 首先，我们需要理解JavaScript的`String.prototype.replace()`方法。...
你给的代码我点击分享区域 <!-- 底部信息 --> <footer class="article-footer"> <div class="share-section"> <span>分享到：</span> <button class="share-btn"> <img src="../../../assets/images/QQ.png" alt=""> </button> <button class="share-btn"> <img src="../../../assets/images/微信.png" alt=""> </button> <button class="share-btn"> <img src="../../../assets/images/微博.png" alt=""> </button> <button class="share-btn"> <img src="../../../assets/images/快手.png" alt=""> </button> <button class="share-btn"> <img src="../../../assets/images/抖音.png" alt=""> </button> </div> <p class="footer-text">请各学院及时传达并组织报名</p> </footer> </article>是没有反应的
最新发布
08-06
3. 是否在`<script setup>`中正确声明了`openShareCard`方法及相关响应式变量 如果问题仍然存在，请提供具体的错误信息以便进一步排查。</think>您提到的问题是由于分享按钮没有绑定点击事件导致的。以下是修复后的...
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>前端网-登录注册</title> </head> <body> <h1>wasai</h1> <p id="p1">不错</p> <img src="1.jbg" alt="示例图片"> <table border="1"> <caption>用户信息表</caption> <tr> <th>序号</th> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> <tr> <td>1</td> <td>张三</td> <td>男</td> <td>18</td> </tr> <tr> <td>2</td> <td>王五</td> <td>男</td> <td>22</td> </tr> </table> <br> <a href="login.html">登录</a> <form action="login.php" method="post" onsubmit="return test()"> <script> function test() { const username = document.getElementById('username').value; const password = document.getElementById('password').value; alert(`用户名：${username}\n密码：${password}`); return false; // 阻止表单提交 } </script> <label>用户：<input type="text" id="username" name="username" required></label><br> <label>密码：<input type="password" id="password" name="password" required></label><br> 男：<input type="radio" name="sex" value="male" required> 女：<input type="radio" name="sex" value="female"><br> 打游戏：<input type="checkbox" name="hobby[]" value="gaming"> 听音乐：<input type="checkbox" name="hobby[]" value="music"> 看小说：<input type="checkbox" name="hobby[]" value="novel"><br> <select id="city" name="city"> <option value="chengdu">成都</option> <option value="guangan">广安</option> <option value="beijing">北京</option> </select> <input type="file" name="file"> <textarea id="comment" name="comment" rows="5" cols="20"></textarea> <input type="submit" value="提交"> <button type="button">注册</button> </form> <script src="test.js"></script> </body> </html> 添加if来判断密码输入错误
03-09
- 图片路径错误：`<img src="1.jbg">` → 应改为`.jpg`或`.png` - 性别单选按钮缺少`<label>`包裹 - 文件上传字段建议添加`accept`属性限制类型 5. **完整改进建议** ```html <!-- 修正后的性别选择部分 --> ...
实现点击不同span，显示不同图片的效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title></title> <style> .wrap { width: 450px; height: 480px; margin: 100px auto; position: relative; } span { display: inline-block; width: 220px; height: 50px; line-height: 50px; text-align: center; color: blue; } img { position: absolute; bottom: 20px; left: 25px; display: none; width: 400px; height: 400px; } span:hover { border: 2px solid blue; border-radius: 20px; } </style> </head> <body> <div class="wrap"> <span>开心</span> <span>难过</span> <img src="images/p1.png"/> <img src="images/p2.png"/> </div> <script> </script> </body> </html>
05-07
另外，用户之前的代码中有一个index变量来记录当前图片的位置，点击span的时候需要更新这个index的值，然后调用切换图片的函数。或者直接在事件处理函数中根据span的索引来切换，而不需要维护index变量？需要看用户...
<img src="">标签通过js异步加载图片
abfdada的博客
01-09 8438
主要是考虑到网络的限制,为了更好的用户体验,采用异步加载显示的方法为img加载图片,直接贴代码: 标签: "getHead(this,url);" src="../../static/xxx/xxx/head.png" > %--这里注意 1,src写在 onload后面 2,请给src一个默认的图片路径,不能直接src="" --%> js: function getHead(obj
html+设置img+src属性值,javascript获取、设置修改img的src属性（get/setAttribute）
weixin_39963465的博客
06-04 7167
在开发网站过程中，事先就设置好了图片img的src性，一般来说很少修改这个属性，网站加载时直接显示事先设置好的图片。但如果网页要求实现滚屏加载图片(动态加载图片)，也就是一次不显示网页内的所有图片，当滚动屏幕时再显示进入屏幕区的图片。这样不但可以减少对服务器的请求次数，而且能大大节省服务器的流量。滚屏加载图片事先把网页内要动态显示图片的所有src属性设置为一张小图，待要显示目标图片时再把src属性...
js html怎么加入图片不显示,js中创建img元素追加src属性添加图片 运行HTML图片不能加载...
weixin_34950302的博客
06-26 1404
js中创建img元素追加src属性添加图片 运行HTML图片不能加载时间：2018-01-17 15:54:34addLoadEvent(prepparePlaceholder);function prepparePlaceholder(){var placeholder = document.createElement("img");placeholder.setAttribute("id","...
html使用js的变量_js变量与简单数据类型
weixin_39939993的博客
12-01 716
js有三种书写位置，分别为行内、内嵌和外部。实际开发中大多使用外部。<script src="helloWorld.js"></script>注：使用外部js文件有利于HTML页面代码结构化，方便文件级别的复用引用外部js文件的script标签中间不可以写代码使用外部js文件适合于js代码量比较大的情况1. js输入输出语句浏览器弹出警示框：浏览器控制台打印输出信息浏览器弹...
HTML中img标签src路径的值需要设置成一个变量来表示
c_staunch的博客
04-10 1万+
在Java开发中，有时候会遇到在显示图片时不需要给图片的src路径设置成固定的，而是需要写入从后台数据库传入的路径变量，下面给出了解决此问题的方法。 <script> var pictureUrl = data.url;//后台传入的图片路径，url指的是数据库中图片的路径 document.getElementById("picture").src = picture...
html中img调用js方法,1kb 的 placeholder.js 增加 img 标签使用方式
weixin_34954140的博客
06-09 640
预览使用引入 placeholder.js 到你的前段代码中:1. 调用 placeholder.js 的方法进行替换，举个例子如下:2. 使用 URL 参数的方式配置 Img 的属性 options ，例如：或者携带参数 options:请注意 img 标签的 class 属性必须 placeholder 。Placeholder 配置项Placeholder 配置项用于 API 方法的输入参数...
html设置路径变量,Bokeh中设置的静态路径变量在哪里（对于create_html_snippet）
weixin_33279929的博客
06-15 280
我正在尝试使用Bokeh的“create_html_snippet”方法在网页中呈现熊猫/海生的情节。在页面上的主要HTML输出完全相同，除了唯一的bokeh文件名明显不同。在唯一的区别是在bokeh生成的*。嵌入.js文件。如下面的摘录所示，该文件中的主机/静态路径变量似乎无法正常工作。用内置的Flask dev服务器和gunicorn进行了测试。在这是@rpazyaquian的Heroku s...
img 标签内如何在src中引用变量
weixin_30546189的博客
02-22 6607
<html><head><script language="javascript">var adres="https://offlintab.firefoxchina.cn/static/img/search/baidu_web.png";function imgUrl() { document.images.imgInit.src = adres...
用javascript脚本--动态指定img对象的src路径---jsp-javascript-j2ee--hibernate--struts-2.0
安优小青和他的程序生活
06-02 5319
javascript,img,src,jsp,j2ee,hibernate,struts-2.0环境: eclipse, struts2,hibernate3.0jsp,j2ee,javascript   [撰写: drs163@163.com   www.newsoftstudio.com ]后台服务端struts2的action已经能将一个列表集合返回到jsp页面. 其中有一个项目
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

chde2Wang

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

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

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

打赏作者

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

抵扣说明：

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

余额充值