文章/答案/技术大牛

发布

js给img设置src

在JavaScript中给<img>元素设置src属性是一种常见的操作，用于动态地更改或加载图片。以下是基础概念以及相关的内容：

基础概念

<img>元素的src属性指定了图像文件的URL。通过JavaScript，你可以更改这个属性的值，从而改变显示的图片。

类型

静态图片：如JPEG、PNG等格式的图片。
动态图片：如GIF或通过服务器端渲染的图片。

应用场景

轮播图：在网站上创建自动或手动切换的图片展示。
用户头像：根据用户的登录状态显示不同的头像。
错误处理：当主图片加载失败时显示备用图片。

示例代码

以下是一个简单的示例，展示了如何使用JavaScript给<img>元素设置src属性：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dynamic Image Example</title>
</head>
<body>

<img id="myImage" src="initial.jpg" alt="Initial Image">

<button onclick="changeImage()">Change Image</button>

<script>
function changeImage() {
  var img = document.getElementById('myImage');
  img.src = 'new_image.jpg'; // 设置新的图片路径
}
</script>

</body>
</html>

在这个例子中，当用户点击按钮时，changeImage函数会被调用，从而更改<img>元素的src属性，显示新的图片。

可能遇到的问题及解决方法

问题： 图片加载失败，显示为破碎的图标。

原因：

图片路径错误。
图片文件不存在或无法访问。
网络问题导致图片加载失败。

解决方法：

确保src属性中的URL是正确的。
检查图片文件是否存在于指定的路径，并且服务器允许访问该文件。
使用onerror事件处理器来处理加载失败的情况，例如显示备用图片：

img.onerror = function() {
  this.src = 'backup_image.jpg'; // 加载失败时显示备用图片
};

通过这种方式，可以提高网站的健壮性，确保即使主图片无法加载，用户也能看到一些内容。

以上就是关于在JavaScript中给<img>元素设置src属性的基础概念、优势、应用场景以及可能遇到的问题和解决方法。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

dom啦11 图片展示核心：在于点击li＞img里面的哪一个就把this.src赋值给div＞img的src

{ width: 120px; vertical-align: bottom; } img src="...images/ad1.jpg" alt=""> img src="images/ad1.jpg" alt=""> img src="...images/ad2.jpg" alt=""> img src="images/ad3.jpg" alt=""> img src=..."images/ad4.jpg" alt=""> img src="images/ad5.jpg" alt=""> <script...} function change() {//然后把li里面的img赋值给div>img。

3.4K2 0

js和jQuery获取img标签的src属性获取不到的解决方法

很多朋友可能遇到过，用 jQuery 获取 img 标签的 src 属性却获取不到的问题： img id="test" src="1.jpg" alt="test" /> 使用如下的语句都会出错：...alert($('#test')); alert($('#test').src); 使用 $('#test').src 语句不会出错，但获取不到 img 的地址。...img 的地址。...拓展： JS获取 img 的 src 值： //方法一： var path = $('#test').attr('src'); //方法二： var path = document.getElementById...("test").src; //方法三： var path = $("#test")[0].src; 声明：本文由w3h5原创，转载请注明出处：《js和jQuery获取img标签的src属性获取不到的解决方法

21.9K6 0

js创建img节点

我们需要使用document对象的createElement方法创建了一个img元素: const image = document.createElement('img') 然后设置img的src属性...: image.src = '/picture.png' (您可以使用相对URL或绝对URL，就像您在普通HTML img标记中使用的那样) 确定了要添加img标签之后，再调用了appendChild

11.3K2 0

js -- canvas img 封装

="http://code.jquery.com/jquery-latest.js"> src="..../index.js"> js 代码 /** * Created by Administrator on 2018/7/6. */ function doNothing...,count[i].inp_id) } }; function getElement(cas_id, box_id, img_src, imgOnload_call, methods,icon_img...= new Image(); var img1 = new Image(); var img1_arr = icon_img.split(','); img.src = img_src...; for(var i = 0; i img1_arr.length;i++){ img1.src = img1_arr[i]; } imgOnload_call

9.1K4 0

利用 img 的 src 属性发起 get 请求踩坑记录

一、背景工作中，碰到一个需求，需要使用img标签的src属性发送一个get请求。原先的设想是，当请求发送成功之后，会触发img的onload回调，请求失败，则触发img的onerror回调。...编写测试demo 首先写一个demo，利用js动态创建一个img标签，然后将接口地址赋值给src属性，发起请求，同时，设置好onload和onerror回调函数。 <!...} img.onerror = function(e) { console.log(e, 'fail') } img.src = 'http://localhost...而当你把src属性的值换成一个正常的图片地址后，onload就能正常触发。 3....console.log(img.complete) // true } img.src = 'http://localhost:3000/get' img.style.width

5.5K0 0

img标签的src=会引起的Page_Load多次执行

" src="" /> 改成二个连续的img，即: img alt="test" src="" /> img alt="test" src="" /> 运行后，页面仍被执行2次继续测试...，把img alt="test" src="" /> 改为 img alt="sss" src="" onerror="this.src='http://www.baidu.com/img/baidu_logo.gif...这回干脆把src=""都去掉，即改成img alt="test" />，再次竞猜结果？居然正常了，即仅执行了一次！...(呵呵，看来多一事不如少一事) 最后再折腾一次，把src故意写成一个错误的地址，比如img alt="test" src="http://abc.asdf.werdafsaf.sadfasdfas.xxx.gif...结论:img标签的src=""时，会引起浏览器再次访问"./"即当前目录，如果该目录下有default.aspx,index.aspx等IIS的默认文档，则默认文档会执行2次

2.3K10 0

vue v-for循环解决img标签的src动态绑定问题

一、概述示例代码： img src="{{ item.imgSrc... }}" alt=""> 发现这样运行会报错二、解决方法 img标签动态绑定src img :src="item.imgSrc" alt=""> 完整代码如下： img :src="item.imgSrc" .../logo.png 是只能写死的情况下显示，而动态的：src绑定是无法完成这种情况的显示。

7.7K2 0

js img转换base64

("canvas"); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext...("2d"); ctx.drawImage(img, 0, 0, img.width, img.height); var dataURL = canvas.toDataURL...= document.createElement('img'); img.src = '....= getBase64Image(img); var img1 = document.createElement('img'); img1.src = data...src="'+this.result+'" alt=""/>' } } <label

5.5K1 0

js -- img 随着鼠标滚轮的变化变化

} return false; } 将鼠标放在图片上，点击一下，然后滚动鼠标滚轮试试看 img...border="0" src="https://timgsa.baidu.com/timg?...image&quality=80&size=b9999_10000&sec=1528862370826&di=17ebe8a1a56a7fc6cc18b22aecd83679&imgtype=0&src

8.8K4 0

PHP 正则表达式获取富文本中的 img标签的src属性

前言鄙人发现对于微信看看中的文章，一般都会有三张摘要图片；所以想着可以直接提取富文本中的 img>标签的 src 属性信息；这样就可以在前台的文章列表中展示三张图片（建议不要多了），吸引阅读...img> 标签是忽略大小写的，并且标签结尾使用 > 或者 /> - 2. src 属性信息一般是以".jpg|.png|.jpeg|.gif"结尾的; 但是也有的不需要扩展没那个结尾（只是个图片链接...注意匹配的结尾形式 ([^\'\"]*) 匹配不上单引号和双引号的字符整理后的处理源码如下： /** * 对富文本信息中的数据 * 匹配出所有的 img> 标签的 src属性 * @param...$imgSrcArr[] = $src; } } } } //$pattern= '/img\b....参考文章 ------ 如何通过正则表达式获取img标签的src属性 ------ PHP正则表达式，看这一篇就够啦！ ②. 推荐学习—— 正则表达式 - 匹配规则

8.5K1 0

HTML img src图片路径不存在，则显示一张默认图片的方法

我们一般会给图片设置 alt 属性，当图片路径不存在时可以显示提示文字。 img src="" alt="图片加载失败"> 如图所示： ?...但是这样很不好看，如果用在文章列表，我们可以给 img 标签设置一个 onerror 属性，可以在 src 路径不存在时显示指定的默认图片。...测试一下，我没有给 src 设置图片链接，代码如下： img src="" onerror="this.src='img/error.png'"/> 显示效果如图： ?...很明显，我们可以看出，当 src 属性为 unknown 时，会自动替换为 onerror 设置的路径。 ? 怎么样，是不是很实用呢？

9.2K1 0

给select设置背景

下面我来给大家介绍一下如何给form表单元素添加背景。先说简单一点的input元素的文本框，当我们给input设置background时会发现他的背景并没有出来，还是显示的是他默认的背景。...我们可以采用另一种透明属性，这种方式采用css方式来实现，就是给select标签添加opacity属性，将他的值设置为0，即可实现select标签透明。...那么我们就该用上模拟的方式了，那就是在select标签下添加一个input标签，让select标签覆盖input，同时给select添加onchange事件，通过js的方式来获取select标签的内容，...下面我给大家来一段演示一下：落帆亭实现的给select标签添加背景 src="jquery...-1.8.0.min.js"> function ip1(){ document.getElementById("ip1

2.5K2 0

第4天：JS入门-给div设置宽高背景色

今天学习了js入门课程，听的不多，做了个小练习，给div设置宽高、背景色。一点点都是进步。核心代码如下： JS入门_设置div宽、高、背景色 <style...box.style.height='400px'; } } 请为下面的DIV设置样式...：点击设置请选择背景色：<span

5K1 0

给容器设置内核参数

怎么给docker容器设置内核参数？怎么给k8s POD设置内核参数？为什么给容器设置某些内核参数之后，主机也会受影响？...也就是多个容器和主机可以各自独立设置某些内核参数。例如，可以通过net.ipv4.ip_local_port_range，在不同容器中设置不同的端口范围。...可以给POD privileged权限，然后在容器的初始化脚本或代码中去修改sysctl参数。...Group=... dockerd 给容器的缺省ulimit设置 dockerd --default-ulimit nofile=65536:65536 冒号前面是soft limit, 后面是hard...limit 给容器指定ulimit设置 docker run -d --ulimit nofile=20480:40960 nproc=1024:2048 容器名在kubernetes中给pod设置

11.4K2 5

手动给boot.img添加init.d支持和内核ROOT

------------------------------------------------- 1.使用bootimg.exe解包内核(文章末尾提供下载链接，bootimg.exe需要和boot.img...在同一目录下,然后打开系统cmd.exe，使用cd命令到达你放置bootimg.exe和boot.img的文件夹下，然后运行解包命令bootimg --unpack-bootimg) 2.进入解包目录(...即你放置bootimg.exe和boot.img的文件夹了里)，找到initrd文件夹进入。...打包完 boot-new.img 为修改好滴内核 boot-old.img为旧的内核 -----------------------------------------------------内核ROOT...persist.service.adb.enable=1 如果ro.secure=0 就是允许我们运行adb root命令，通常内核root就是指ro.secure=0 将ro.secure=1修改成ro.secure=0，之后打包回来boot.img

3.9K1 0

js 画布与图片的相互转化(canvas与img)

使用js将图片拷贝进画布 //将图片对象转化为画布，返回画布 function ImageToCanvas(image) { var canvas = document.createElement("...image.height; canvas.getContext("2d").drawImage(image, 0, 0);//0, 0参数画布上的坐标点，图片将会拷贝到这个地方 return canvas; } 使用js...将画布转化为图片 //将画布转化为图片 function canvasToImage(canvas) { var image = new Image(); image.src = canvas.toDataURL...("image/png"); //在此处也可以使用js的appendChild()方法将此img加入html页面 //return image; } 参考地址：http://blog.csdn.net

5.4K2 0

在mac上用Terminal给SD卡写入img镜像的方法

前言给sd卡写入官方镜像，在windows上要用Win32 Disk Image,因为我用的是Mac系统切来切去有点麻烦，要是直接在Mac上写就方便多了。...操作步骤 1.进入目录插入要写入的sd卡，进入Mac上存放img镜像文件的目录，比如我的就是放在Desktop上的raspberryiso文件夹，那么terminal的命令就是: cd ~/desktop...4.用dd命令将树莓派系统镜像写入SD卡 sudo dd bs=1m if=.img of=/dev/ (换成要你写入镜像的文件名) 输入这个命令后系统会提示你输入密码

3.4K1 0

如何给标签设置动态日期

这个日期是一个可变数据，会随着系统时间的变化而变化，小编下面就为大家介绍如何给标签设置动态日期。　　...打开条码软件，新建一个标签，设置标签的尺寸，需要注意的是标签纸张大小需要和打印机中的标签纸张大小保持一致。使用单行文字和条码工具制作标签。...01.png 　　使用单行文字在生产日期后面添加一个文本，在弹出的界面中将数据来源设置为来自日期时间，在日期时间格式处选择一个日期格式。软件提供了5种选择，您可以根据需要随意选择。界面下方可以预览。...03.png 　　有需求的朋友，都可通过自定义设置日期格式来实现自己想要的日期样式效果。

3.4K2 0

django admin 给字段设置 widget

readonly_fields = ('slug',) show_detail_fields = ['show_status', ] # 重写字段类型的 widget, attrs 属性可以设置前端样式...readonly_fields = ('slug',) show_detail_fields = ['show_status', ] # 重写字段类型的 widget, attrs 属性可以设置前端样式

2K3 0

如何给Ubuntu设置root账户？

昨天我们讲解了Java的构造函数重载以及和普通函数的一些区别，那么今天来玩点别的，比如最新的Ubuntu系统在进入系统后并没有给我们设置root账号，那么今天就让小编来带大家演示一下。...当我们创建好系统后，尝试进入root账户，会发现出现如下的报错：接下来我们打开终端后输入命令：sudo passwd root 接下来会让我们输入此账号的密码，即开机密码，输入正确后按enter键后会让我们设置...root账户的新密码，我们设置完后按enter键，最后会出现：Retype new password，这是让我们重新输入密码以确认密码正确。...如下：当看到successfully时就说明设置成功了。最后输入命令su,再输入刚刚设置的root账户密码即可登录成功。如下：

3.1K1 0

点击加载更多