使用javascript更新src

我使用的是一个twitter抓取器，但今天早上，twitter似乎已经改变了他们为twitter提要提供个人资料图片的方式

我仍然只是一个javascript初学者，我研究了他的代码，但看不出他从何处绘制了配置文件图片，因此我编写了一个函数，从img（如下所示）获取属性，并将其应用于src属性

不幸的是，我一定是做错了什么，因为它似乎没有起作用。我在JS Bin中发现了一个错误：

TypeError:无法读取null的属性“0”

有没有关于我可能做错了什么的建议

我的职能：

    function profileImageFix(profileImage) 
    {
        profileImage = document.getElementsByClassName("user")[0].getAttribute("data-src-1x")[0];

        document.getElementsByClassName("user")[0].setAttribute(src, profileImage);
    }
    profileImageFix();

通过推特提要获得的HTML是：

    <div class="user">
      <a href="https://twitter.com/" aria-label="twitter (screen name: twitter)" data-scribe="element:user_link" target="_blank">
        <img alt="" data-src-1x="https://pbs.twimg.com/profile_images/661484218843953664/_B24ia6H_normal.png" data-src-2x="https://pbs.twimg.com/profile_images/661484218843953664/_B24ia6H_bigger.png" data-scribe="element:avatar">
        <span>

        <span data-scribe="element:name">twitter</span>
        </span>
        <span data-scribe="element:screen_name">@twitter</span>

      </a>
    </div>

试试这个

$("#imageID").attr('data-src-1x', 'Your src');

试试这个

$("#imageID").attr('data-src-1x', 'Your src');

---

在撰写本文时，Twitter Fetcher的最新版本（14.0版）现在支持在Twitter更改格式后再次显示用户头像的修复程序。您可以在此处从GitHub获取最新版本：

Twitter Fetcher的解决方案如下：

---

avatarImg.src=avatarImg.getAttribute（'data-src-2x'）

撰写本文时最新版本的Twitter Fetcher（14.0版）现在支持在Twitter更改格式后再次显示用户头像的修复程序。您可以在此处从GitHub获取最新版本：

Twitter Fetcher的解决方案如下：

---

avatarImg.src=avatarImg.getAttribute（'data-src-2x'）

getElementByTagName

==>

getElementsByTagName

（添加了

s

），它返回元素的集合。使用

document.querySelector（'.user a img'）.src=profileImage

您正在混合使用普通Javascript和jQuery（

document.$（选择器）

），但是，

getAttribute

将是一种类似于

getAttribute（“data-src-1x”）

的方法。除非是jQuery，否则在这种情况下，您应该使用

attr（“data-src-1x”）

或

data（“src-1x”）

。但是请查看Javascript控制台（按F12键）以查看您会遇到哪些错误。这里有这么多简单的错误，你至少可以（也应该）了解一下你自己。嗨@GolezTrol，我用JS-bin来帮助我诊断任何问题，但帮不了我那么多。不过，我会把你的评论带到黑板上，继续学习javascript和jquery带来的差异。很好。我的意思不是说你应该自己解决错误，但是控制台通常会给你特定的错误消息，这些消息会给你搜索的线索，如果你找不到答案，你可以把它们包含在你的堆栈溢出问题中。当然，JS-Bin也可以做到这一点，但控制台会在你的浏览器中直接显示出来，并且经常足以发现一个容易被忽略的小问题。@GolezTrol评论很快让我意识到我忘记了JS-Bin中的一些重要部分，因此非常感谢。我现在已经多次重新运行脚本，以获得更好的工作版本。我也用这些新的变化更新了这个问题。非常感谢。

getElementByTagName

==>

getElementsByTagName

（添加了

s

），它返回元素的集合。使用

document.querySelector（'.user a img'）.src=profileImage

您正在混合使用普通Javascript和jQuery（

document.$（选择器）

），但是，

getAttribute

将是一种类似于

getAttribute（“data-src-1x”）

的方法。除非是jQuery，否则在这种情况下，您应该使用

attr（“data-src-1x”）

或

data（“src-1x”）

。但是请查看Javascript控制台（按F12键）以查看您会遇到哪些错误。这里有这么多简单的错误，你至少可以（也应该）了解一下你自己。嗨@GolezTrol，我用JS-bin来帮助我诊断任何问题，但帮不了我那么多。不过，我会把你的评论带到黑板上，继续学习javascript和jquery带来的差异。很好。我的意思不是说你应该自己解决错误，但是控制台通常会给你特定的错误消息，这些消息会给你搜索的线索，如果你找不到答案，你可以把它们包含在你的堆栈溢出问题中。当然，JS-Bin也可以做到这一点，但控制台会在你的浏览器中直接显示出来，并且经常足以发现一个容易被忽略的小问题。@GolezTrol评论很快让我意识到我忘记了JS-Bin中的一些重要部分，因此非常感谢。我现在已经多次重新运行脚本，以获得更好的工作版本。我也用这些新的变化更新了这个问题。非常感谢，谢谢。谢谢你的更新。我在github上关注了这一点，并在最近应用了更新，但非常感谢这里的后续回答。感谢更新。我在github上关注了这一点，并在最近应用了更新，但非常感谢这里的后续回答。