如何用javascript替换图像srcset答案

【问题标题】：how to replace image srcset with javascript如何用javascript替换图像srcset
【发布时间】：2021-11-02 09:33:27
【问题描述】：

我正在做 A/B 测试。我需要更改图片网址。我有一个 https://newimage.svg 需要在控制台上用 javascript 替换 srcset img.png：

<picture class="pic_test">
  <source media="(min-width: 992px)" srcset="img.png">
  <source media="(min-width: 600px)" srcset="img.png">
  <source media="(max-width: 599px)" srcset="img.png">
  <img src="img.png">
</picture>

这是源结构的示例。由于机密的工作要求，我不能提供所有内部信息，但这是一个摘要（如果添加它可能会有所帮助）：

<source media="(min-width: 992px)" class="" src="" data-src="" data-srcset="img.png 960w,img.png 1176w,img.png 1600w,img.png 2400w" srcset="img.png 960w,img.png 1600w,img.png 2400w">

我尝试了很多东西，但它不起作用。有谁知道如何使用 javascript 或 jquery 更改图像 url？

【问题讨论】：

“我尝试了很多东西，但都没有成功” 能否请您附上您的尝试？通过这种方式，我们可以帮助您找出它不工作的原因并可能创建一个答案。所以不是要求免费解决方案的地方。 -> How to Ask
var img = document.querySelector(".class > img"); var myFunction = function() { img.srcset="newimg.svg"; }
document.querySelector(".class > img").src="img.svg";
请更新您的问题，而不是在 cmets 中发布，这将有助于未来的读者
当我选择 $('source[srcset]');它只选择一种尺寸

标签： javascript jquery src srcset

【解决方案1】：

如果我正确理解您的问题，您的<picture> 中有一个号码<source>，您需要更新他们所有的srcset。

您可以使用querySelectorAll 选择所有<source>、forEach 来循环它们，最后使用setAttribute 更新srcset 属性。

源元素还有一个 srcset 属性 (MDN)，但仍处于试验阶段（截至 2021 年 11 月）。

var sourceList = document.querySelectorAll('picture.pic_test source');
sourceList.forEach((source)=> {
    source.setAttribute('srcset','img.png');
});

【讨论】：

这个回答效果很好！我是一名初级开发人员。我选择了错误的元素并且做错了。非常感谢。我还在学习js

【解决方案2】：

你可以使用 attr() 函数来改变 jquery 的 src 属性

console.log('before : '+$('#myImg').attr('src'));
$('#myImg').attr('src','google.png');
console.log('after : '+$('#myImg').attr('src'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<picture class="pic_test">
  <source media="(min-width: 992px)" srcset="img.png">
  <source media="(min-width: 600px)" srcset="img.png">
  <source media="(max-width: 599px)" srcset="img.png">
  <img src="img.png" id="myImg">
</picture>

【讨论】：