使用jQuery更改img源
是指通过jQuery库中的方法来动态修改HTML页面中img标签的src属性值，从而实现图片的更换或替换。
具体步骤如下：
- 引入jQuery库：在HTML页面中的<head>标签内或者<body>标签结束前，通过<script>标签引入jQuery库，例如：<script src="https://cdn.jsdelivr.net/jquery/3.6.0/jquery.min.js"></script>$(document).ready(function() { // 通过id选择器选取img标签，并修改src属性值 $("#myImage").attr("src", "new_image.jpg"); });<img id="myImage" src="old_image.jpg" alt="Old Image">
- 编写jQuery代码：在<script>标签内或者外部的.js文件中，使用jQuery的选择器选取需要修改的img标签，并使用attr()方法来修改src属性值，例如：
- HTML页面中的img标签：在HTML页面中，使用<img>标签来展示图片，并为其设置id属性，例如：
通过以上步骤，当页面加载完成后，jQuery代码会被执行，从而将img标签的src属性值修改为"new_image.jpg"，实现了图片的更换。
使用jQuery更改img源的优势：
- 简洁易用：jQuery提供了简洁的语法和丰富的方法，使得操作DOM元素更加便捷。
- 跨浏览器兼容性：jQuery封装了对不同浏览器的兼容处理，保证了代码在各种浏览器中的一致性。
- 功能强大：除了修改img源，jQuery还提供了众多其他功能，如事件处理、动画效果、AJAX等，方便开发人员进行更多的交互操作。
应用场景：
- 图片轮播：通过更改img源，实现图片轮播效果。
- 图片切换：根据用户的操作或其他条件，动态更换图片展示。
- 动态加载图片：根据后端返回的数据，动态加载不同的图片。
推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云对象存储（COS）：提供高可靠、低成本的云端存储服务，适用于存储和处理图片等静态资源。详细介绍请参考：腾讯云对象存储（COS）
- 腾讯云云服务器（CVM）：提供弹性计算能力，可用于部署和运行各类应用程序。详细介绍请参考：腾讯云云服务器（CVM）
- 腾讯云内容分发网络（CDN）：加速静态资源的访问，提高用户访问体验。详细介绍请参考：腾讯云内容分发网络（CDN）
相关·内容
我需要一些简单的JQuery代码，这样我就可以更改特定img的src值。
目前是：
<img id="myImage" src="image1.gif" />
我需要将其更改为：
<img id="myImage" src="image2.gif" />
使用JQuery。
浏览 0提问于2012-01-28得票数 15
回答已采纳
我试图使用innerWrap将td值包装成图像，
jQuery( "td[id^='imageList']" ).wrapInner( "<img></img>" );
jQuery( "td[id^='imageList']" ).wrapInner( "<img>" );
jQuery( "td[id^='imageList']" ).wrapInner( "<img src=''>"
浏览 4提问于2014-07-07得票数 1
回答已采纳
jQuery: v1.7.1
大家好，
我将img属性从jQuery中更改如下：
$("document").ready(function () {
$("img").attr({ src: "images/Spring.jpg", alt: "spring" });
});
更改反映在浏览器中，但是，
1)当我检查“查看源代码”时，没有js更改的任何更改(它是原始html)，为什么？如下所示：
<a href="images/Grass.jpg">
浏览 2提问于2012-03-11得票数 7
回答已采纳
2回答
我有一个带有外部javascript库的网页，还有我自己的额外代码。不能更改外部库。它操作dom元素，添加新元素，更改属性(例如，一些<img>节点上的src，等等)。我正在使用jQuery。当节点的属性值发生变化时，是否有任何事件处理程序被触发？
也就是说，有没有什么方法我可以检测到(在jQuery中) <img>的src何时被更改(由其他人更改？)
浏览 3提问于2010-11-15得票数 5
回答已采纳
我编写了一些代码(在堆栈溢出的帮助下)，在单击时切换两个图像。但是，我希望第二个图片被链接到另一个网页(例如。应用商店)。
当我单击第二个图像时，图像总是来回移动，我如何添加到第二个图像的链接？
jQuery：
<script type="text/javascript">
$(document).ready(function() {
$('#slick-toggle').click(function() {
$('img',this).attr('src', functio
浏览 0提问于2014-06-11得票数 0
回答已采纳
用这个打了我的头好一阵子了。我是JavaScript和jQuery的新手。经过大量的尝试和错误之后，我最终成功地编写了一个函数来更改图像的src属性，以创建幻灯片：
$(function () {
var slideshow = $("#img_slideshow");
var images = [
'img/slideshow1.jpg',
'img/slideshow2.jpg',
'img/slidesh
浏览 2提问于2014-04-22得票数 0
回答已采纳
4回答
我需要一些jquery的帮助。我有一个简单的图片库，我想添加一些jquery效果(特别是淡入/淡出#actimg中的图片)。请记住，我对jquery不是很熟悉。
js
<script type="text/javascript">
function showPic (whichpic) {
if (document.getElementById) {
document.getElementById('actimg').src = whichpic.href;
return false;
} else {
return true;
浏览 0提问于2011-07-30得票数 2
回答已采纳
1回答
我是JavaScript的新手，所以如果有人问我这个问题，请原谅我。
我想使我的img标记响应，所以我使用如下：
<img data-nsrc="<?php
echo wp_get_attachment_image_src( get_post_thumbnail_id()
, 'small-post'
, false )[0] ?
浏览 2提问于2016-05-03得票数 0
回答已采纳
根据下拉选择，我使用这段代码来显示和隐藏图像：
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.pack.js"></script>
</head>
<body>
<select id="my_select" name="select_name" class="order_form_select">
<option data-img=""
浏览 5提问于2016-10-19得票数 0
回答已采纳
我试图在javascript中旋转一组6张图像，而不是jquery。第一个图像出现，但其余的不旋转。这是我的密码：
<html>
<head>
<script type="text/javascript">
function rotatePic() {
var qutAd = document.getElementById("yumOreos");
var imgs = ["images/img1.png", "images/img2.png", "images/img3.png
浏览 2提问于2014-12-16得票数 1
回答已采纳
使用jquery + php。自定义AJAX验证码。也就是说，用户点击图片，它会自动更新。
<script src="/js/jquery.js"></script>
<script>
$(document).ready(function(){
$.post('/captcha.php', {}, function(resp){
$("div").html(resp);
});
});
</script>
<div></div>
浏览 2提问于2012-04-11得票数 0
回答已采纳
使用以下代码块：
jQuery(document).ready(function($) {
$("img[src$='.jpeg'], img[src$='.jpg'], img[src$='.png'], img[src$='.gif']").wrap('<div class="b-img"/>').each(function() {
var src = $(this).attr('src');
var a = $(
浏览 1提问于2012-12-26得票数 1
回答已采纳
1回答
我有一个jquery版本的问题，之前我添加了https://code.jquery.com/jquery-3.5.1.slim.min.js，所以模式弹出窗口没有问题，但最近我修改了jquery版本，并根据需要添加了https://code.jquery.com/jquery-3.5.1.slim.min.js，所以我得到了错误，模式弹出窗口没有正确响应。下面是我的代码： <div class="row pd-top-20">
<div class="col-md-6 col-sm-12">
<a class="card-
浏览 14提问于2020-08-24得票数 0
我在IE9中有一个img标记，比如<img id="xxx" />，没有"src“属性。我使用js设置其"src"，然后使用Jquery中的removeAttr函数删除"src“属性，但问题来了。
注意图片框，没有"src“属性，但页面仍然显示错误图像。如何将其移除？
浏览 7提问于2012-03-06得票数 2
回答已采纳
我正在更改javascript中的图像源，比如
<img src="image1.gif" name="imagename">
//Array
img[0]='image1.gif'
img[1]='image2.gif'
...
//onclick event changing img src
document.images[imagename].src = img[1]
它运行良好。如何在更换图片来源时给图片添加幻灯片效果？我可以使用jquery。
浏览 2提问于2010-09-23得票数 0
1回答
我有一个来自模板的div，如下所示：
<div class="parallax-container" data-parallax-img="img/index_photos/2.jpg">
//some content
</div>
我尝试使用jQuery更改div属性，如下所示：
<script type="text/javascript">
var bgImg = 1;
window.setInterval(function(){
yourFunction();
},
浏览 1提问于2018-11-06得票数 0
3回答
当用户在站点上滚动时，我试图使img更改为gif。
<img src="img/giphy.gif" alt="" id="imgAnimate">
JQUERY
$(document).ready(function()
{
$("#imgAnimate").hover(
function()
{
$(this).attr("src", "img/gi
浏览 2提问于2016-05-27得票数 1
回答已采纳
我尝试创建一个简单的jquery库。
我让它工作，除了，当你点击拇指-它这样做：
用第一个图像替换现有拇指的空间。
抛出浮点数，拇指位于主图像上方。
点击最后的拇指看我的意思
有人知道我如何用CSS或Jquery来解决这个问题吗？
我试着让这个超级简单。
谢谢
下面是jsfiddle：
<div>
<img src="image1.jpg" class="first"/>
<img src="image2.jpg" />
</div>
浏览 2提问于2013-10-11得票数 0
回答已采纳
我有一个基于用户角色修改colspan属性的jQuery方法。当我是所有其他角色时--函数和jQuery方法--但是，作为查看器角色，jQuery说它做出了更改，修改后的colspan的td元素中的onclick方法表示它发生了变化，但是html src并没有根据原始值进行更改和显示。
Java函数
function changeFooterLength(action,tableType,role)
{
if(role != "viewer"){
if(action == "show"){
$("#foot
浏览 3提问于2014-04-24得票数 0
回答已采纳
我只写了一个简单的脚本，其中一个改变了img标签中的alts。但这是行不通的。这是我的剧本：
jQuery(document).ready(function($) {
var slowakluczowe = ['alt1', 'alt2', 'alt3'];
$("img").attr("alt", function() {
return slowakluczowe[Math.floor(Math.random() * slowakluczowe.length)];
});
浏览 0提问于2016-07-04得票数 0
4回答
我有一个脚本，改变一些悬停图像。工作真的很好，但是我想在两个图像之间添加一点淡入淡出。这是脚本。对jQuery来说真的很陌生，所以我有点困惑该把它添加到哪里去。任何帮助都将不胜感激
jQuery(document).ready(function ($) {
var img_src = "";
var new_src = "";
$(".rollover").hover(function () {
img_src = $(this).attr('src');
new_src =
浏览 0提问于2014-04-08得票数 0
2回答
当我滚动的标志图像快照，因为我希望他们交叉褪色。这是我的小提琴。
$(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$('.wsmenu-list').css('margin', '5px auto');
$('.megamenu').css('top', '60px');
$('.
浏览 0提问于2018-04-02得票数 0
回答已采纳
3回答
我们基于jQuery手机的网站将用于大屏幕平板电脑和手机。
一些我们希望在手机上使用时更小的图像。
例如,
myImage_large.png
myImage_small.png
有没有办法使用data-tag或其他jQuery-mobile方法在img标记中指定在较小的设备上应该使用较小的图像。
浏览 0提问于2012-01-14得票数 1
回答已采纳
我试着通过点击插件fotorama来添加图片的增加。我使用此代码来增加活动图像，但此代码适用于页面上的所有元素。
jQuery("div:contains('fotorama__stage__frame fotorama__fade-rear fotorama__loaded fotorama__loaded--img fotorama__active'):contains('img .fotorama__img')").click(function () {
var o=jQuery(this).parent();
va
浏览 7提问于2014-10-08得票数 1
1回答
在DOM中，我加载了一个静态的Google Map图像。当文档准备好使用jQuery时，有时我需要用更大的版本替换该图像。问题是，在IE中，CPU会发出呼呼的声音，因为IE仍在寻找加载初始图像，但没有成功。有没有办法取消或清除之前的加载？
编辑:我应该注意，当SWFObject没有成功嵌入时，我在函数中使用了.html()。
我不能在下面的例子中重现这个问题，但我基本上是这样使用的：
JS：
$(document).ready(function() {
$("img#myImage").html('<img id="myImage" src
浏览 1提问于2010-03-05得票数 0
回答已采纳
我在一个网站上工作，其中的内容是重要的从一个旧的网站与一个不同的领域。大约一半的图像有相对的路径，这是很好的工作。另一半具有与旧域硬编码的绝对路径。旧的网站已经被拆除，所以这些图像不再工作。但是，这些映像确实是导入的，并且存在于新服务器上。将这些路径更改为相对URL可以纠正此问题。
长期的解决方案是通过每一页和每一页从这些图像src中删除旧域。
但作为短期解决方案，我想应用javascript或jquery解决方案，它将遍历页面上的每个img，检查每个图像的url，如果包含旧域，则删除它。到目前为止，我还没有取得多少成功。
下面是我的示例HTML：
<p><img src=&
浏览 6提问于2015-08-24得票数 1
回答已采纳
1回答
我想做一些有趣的事情，例如，我在我的网站上有一个图像，我想在按钮被触发时更改它，但当按钮再次被单击时，我想将其恢复到原始状态(或添加相同的img到它)，并在事件被单击时重复此操作。我如何才能做到这一点？ 以下是我当前的Jquery，但仅适用于单击一次 $('#menu-btn').on({
'click': function () {
$('#div1').attr('src', 'images/card-light.png');
}
});
浏览 17提问于2021-04-29得票数 1
回答已采纳
所以我在做一个项目，它要求我使用table，并禁止我使用任何div标签。
我想在我的桌子的一行做一个滑块。我想要的图像改变与点击其他图像在第二行。我已经使用下面的代码做到了这一点：
function changeImage(a) {
document.getElementById("imgblockjs").src=a;
}
和html：
<HTML>
<HEAD>
<TITLE>
Home -- RTR
</TITLE>
<LINK REL="ICON" TYPE="IM
浏览 2提问于2017-05-07得票数 0
假设我有一个主题切换器，并且有多个图像/图标
<img src="images/icons/icon-1.png">
<img src="images/icons/icon-2.png">
<img src="images/icons/icon-3.png">
<img src="images/icons/icon-4.png">
此外，我还有另一组不同颜色/路径的图标。
<img src="images/icons/blue/icon-1.png">
&
浏览 3提问于2015-05-20得票数 0
回答已采纳
我试图通过单击div和另一个div更改背景图片来获得：
<div class="stileone" value="http://lorempixel.com/200/200/">
<img scr="http://lorempixel.com/200/200/">
</div>
<div class="stileone" value="http://lorempixel.com/150/150/">
<img scr="http://lore
浏览 17提问于2016-01-05得票数 1
回答已采纳
我正在制作一个图像映射，并一直试图通过更改图像源来使图像连续淡入和淡出(这一点很重要)。下面代码的问题是，它只使用最后一个源图像，并且淡入和淡出5次。我当然希望每个图像淡入淡出一次。大脑可能很快就会爆炸。知道我做错了什么吗。如你所见，我是jQuery的新手。感谢你的帮助。
imgArray = Array(
"img0.png",
"img1.png",
"img2.png",
"img3.png",
"img4.png"
);
jQuery(document).ready(function(
浏览 0提问于2012-07-16得票数 0
回答已采纳
1回答
$(document).ready(function() {
$('#tapaintings a img').mouseenter(function() {
var fileNameForSrc = $(this).attr("src").replace(/^.*[\\\/]/, '');
$(this).attr("src", "images/" + fileNameForSrc);
});
$('#tapaintings a img').m
浏览 3提问于2013-07-29得票数 0
回答已采纳
我正在为我正在做的一个项目制作一个视频和图像库。我希望能够有一个更大的img/视频，然后是一系列缩略图，当你悬停在它们上面时，会将掉期更改为更大的img/视频。试图复制类似的东西。
我已经能够做的交换与图像，但没有能够找到如何做它与视频。对我怎么做有什么想法吗？我对jquery还有点陌生，所以我还没有完全理解。
到目前为止，这就是我所拥有的：
Javascript
$('#imgDetail li img').hover(function(){
$('#bigImg').attr('src',$(this).attr('s
浏览 4提问于2014-01-20得票数 1
回答已采纳
1回答
我正在构建一个eCommerce商店，我已经写了一小块jQuery，只为主页修改SRC徽标。问题是，当我加载页面时，在应用新的SRC之前，我可以看到不正确的徽标加载。我在这里记录了这个问题：
jQuery:
<script>
jQuery(document).ready(function() {
if (top.location.pathname === '/') {
jQuery(".logo img").attr("src", "newsrc.png");
浏览 3提问于2016-10-12得票数 0
回答已采纳
2回答
我在更新数据属性值方面遇到了一些困难。我有一张大图片，下面有几个缩略图。我想要做的是，当单击任何缩略图时，它就会更新大图像的图像源和数据属性值。到目前为止，我能够更改源，但不能更改数据属性。我确实看到了一些类似的问题，并尝试了一些解决方案，但到目前为止没有为我工作。
这是我的代码：
(我使用虚拟图像源来解释我的代码)
<div class="bigImage">
<img id="zoom_Photo" src="NormalSize.jpg" data-zoom-image="BigSize.jpg" /&
浏览 8提问于2018-01-05得票数 0
3回答
我需要遍历DOM中的所有图像并替换特定的源。
不知道为什么这不管用。
更新
我需要在每个图像的src中进行搜索和替换。如果源文件只包含"old/directory“，则将其替换为"new/directory”。
jQuery('.element img').each(function () {
jQuery(this).attr('src', jQuery(this).attr('src').replace("old/directory", "new/directory"));
});
浏览 0提问于2014-01-29得票数 4
回答已采纳
6回答
我需要使用jQuery动态替换图像，并知道如何使用jQuery替换图像src值。
但是我的主要挑战是找到<img>标记并获取它的当前值，因为这个HTML正在显示一些其他API，而这并不在我的控制范围之内。我只能向外部id添加一个div属性。
这是当前由系统生成的HTML结构：
<div id="mysection" class="span-20">
<div class="row">
<img src="/*/desktop/*/images/404.jpg">
浏览 11提问于2014-02-21得票数 1
回答已采纳
4回答
这是我的img，<img src="one.png" id="one" onMouseOver="animateThis(this)">
当用户将鼠标悬停在jQuery上时，我希望慢慢地将此图像源更改为"oneHovered.png“。哪种jQuery方法最适合这样做？我看到的很多例子都要求我改变CSS的背景。有什么可以直接改变src属性的吗？
浏览 2提问于2012-05-07得票数 11
回答已采纳
如何在这些图像上创建onclick，使其像缩略图一样，并在其下方显示更大的版本？在jQuery中。我正在使用flickr Api来搜索图片，这就是我在如何创建onclick函数时感到困惑的地方，如果我点击一个图片，图片的放大版本将显示在主div中的图片下方。非常喜欢这里的这个jFiddle 。感谢大家的帮助。
body {
background-color: grey;
}
#main {
background-color: red;
width: 1100px;
height: 600px;
position: absolute;
right:25
浏览 1提问于2015-04-26得票数 0
我有以下JavaScript (jQuery)和HTML结构：
$(function(){
$('source').each(function(){
console.log('a source element');
});
});
<div class="container">
<picture>
<source media="(min-width: 1200px)" srcset="https://via.placeholder.com/300&#
浏览 20提问于2019-11-13得票数 0
朋友
light box在Chrome和IE中不起作用，但在Mozilla上起作用。这是一个编码问题，请帮我解决。我给出了下面的代码。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
function check(chkbox,srr)
{
if (chkbox.che
浏览 0提问于2011-07-08得票数 0
1回答
我正在制作一个简单的滑块，它通过更改img标记的src属性和锚标记的属性来工作。这就是我到目前为止想出的：
(function($){
var slides = [
'http://placehold.it/801x350',
'http://placehold.it/802x350',
'http://placehold.it/803x350'
],
titles = [
'Title 1',
'Title 2'
浏览 0提问于2012-02-21得票数 0
回答已采纳
我正在开发一个captcha控件，它允许刷新captcha图像。我没有将映像存储在服务器上的选项。为此，我正在使用ASP.Net MVC。
我的控制器操作代码：
public FileResult GetCaptchaImage()
{
// Create a CAPTCHA image using the text stored in the Session object.
CaptchaImage ci = new CaptchaImage(this.Session
["CaptchaImageText"].ToString(), 300,
浏览 1提问于2016-10-06得票数 2
回答已采纳
我有一个JavaScript / jQuery函数，当我单击页面上的按钮时会执行该函数。我在页面上也有一个<img> (id="P34_DOWNLOAD_STATUS_ICON")，它的源最初设置为服务器上图像目录中一个名为"magnifying_glass.png“的文件。该函数启动一个AJAX回调并解析其响应。当响应成功时，我的状态img的src将更改为icon_ok.png，以防错误更改为icon_err.png。到目前一切尚好。
我还想在AJAX调用执行之前将img源代码更改为GIF，以便用户看到正在发生的事情。这就是问题所在:在Firefox中，一
浏览 1提问于2015-08-10得票数 0
我正在构建一个在功能上类似于www.chanel.com的主页。当您第一次加载页面时，我已经通过HTML5循环播放嵌入了一个视频。为了兼容性和易用性，我想要一个在除IE之外的所有浏览器中控制其可见性(当链接悬停在其上时隐藏)的jQuery函数，以及一个仅用于IE的替代jQuery函数，隐藏视频并使图像在其位置可见。
耽误您时间，实在对不起!
HTML
<div id="content">
<video id="vid_home" width="780px" height="520px" autoplay=
浏览 1提问于2011-01-13得票数 1
在我看来，我展示了一幅图像
<img src="~/Content/img/icon@(item.levelList.rank.Trim()).png" alt="@item.levelList.rank.Trim()" height="40" width="45">
我还有两个跨度，一个是最初显示的(上面的图像)，另一个是隐藏的(编辑功能)。
当单击Edit时，spans切换可见性，上面的img被隐藏，下拉列表将显示为附加的图像值。
当我单击Save时，下拉列表被重新隐藏，img被重新显示，然后下拉列表的值被应用到i
浏览 0提问于2014-06-21得票数 0
回答已采纳
3回答
jQuery实际图像直径
、、、、
我有一张1024x768的图像
<span class="frame">
<img alt="Image" title="Image" src="hD41120CA-7164-11DF-A79E-F4CE462E9D80_Green_Sea_Turtle.jpg">
</span>
下面的CSS将图像宽度设置为
.frame img{
width:425px;
}
和jQuery代码
$('.uploaded_image img').attr("width
浏览 0提问于2010-06-07得票数 3
回答已采纳
我有一个用jQuery动态加载的JavaScript 。
我想要做的是用存储在我的Image对象上的图像来更改<img />图像。我该怎么做呢？
注意:我希望避免更改<img />标记的源，因为它会再次从服务器下载它，并且图像已经存储在我的图像对象中
浏览 1提问于2013-03-11得票数 9
回答已采纳
4回答
单击div时更改图像
、、、
我有一个div动作像按钮，包含一个图像。我想，当我点击div，它里面的图像会改变，我放了一个jquery，但是我的jquery只能用1种方式工作，它可以切换到第二个图像，但不能切换回第一个图像。
HTML :
<div class="post-like m-30">
<img class="img-responsive" src="img/like.png" alt="">
<h4 class="bold text-center capital">apprecia
浏览 0提问于2016-03-08得票数 1
回答已采纳
我尝试使用Spring4 (4.0.2)、Thymeleaf2 (2.1.3)和JQuery 2 (2.1.1)。我所尝试的就是使用Petclinic示例制作导航片，但是我在Thymeleaf的URL语法上得到了JQuery语法错误
Error: Syntax error, unrecognized expression: /petclinic/register.html
我的页眉：
<!DOCTYPE html>
<html lang="en">
<head th:fragment="headTag">
<meta h
浏览 1提问于2014-07-21得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
