使用 javascript 动态显示图像 url答案

【问题标题】：Dynamically display an image url with javascript使用 javascript 动态显示图像 url
【发布时间】：2017-03-22 14:20:11
【问题描述】：

我正在使用标签管理器将来自网站的信息动态放置到使用自定义 javascript 的 html 元素中。我现在的代码是这样的。 PS我无法弄清楚如何正确发布。这实际上是从

function(){
    console.log("Start image variable");
    var element = document.getElementsByClassName("MagicZoomPlus")[0];
    console.log(element);
    var image = element.getAttribute("img src").innerHTML;
    console.log(image);
    return image;
}

这将返回以下调试信息

unreachable code after return statement[Learn More]  trustlogo.js:28:123
Start image variable  gtm.js:1:42
<a id="ZoomGallery" href="/uploads/products/892_3521-05 .jpg" class="MagicZoomPlus" title="Franklin Paradigm Grey Sofa">  gtm.js:1:136
undefined  gtm.js:1:186

我要访问的网站上的 html 是

<a id="ZoomGallery" href="/uploads/products/892_3521-05 .jpg" class="MagicZoomPlus"   title="Franklin Paradigm Grey Sofa"><img src="/uploads/products/892_3521-05 .jpg" alt="FranklinParadigm Grey Sofa" /></a>

【问题讨论】：

var 元素不是图片而是链接。您可以得到如下图：stackoverflow.com/questions/10381296/…，并从该节点获取属性。

标签： javascript image unreachable-code

【解决方案1】：

不需要您的 .innerHTML()。 getAttribute() 函数只返回一个带有属性值的字符串，如果该属性不存在，则返回 null。

要获取元素的 src，也就是图片的 url，你必须这样做：

var imageSrc = element.getAttribute("src");

然后简单地return imageSrc

有关mozilla developper network的更多信息

【讨论】：

好的，所以当我尝试使用新行时，它返回“null”，我知道我遗漏了一些东西。 function() { var element = document.getElementsByClassName("MagicZoomPlus")[0]; var imageSrc = element.getAttribute("src");返回图像源； }
您的标签没有您要查找的类名（Magic zoom plus）。当您想要选择 img 标签以获取其 src 时，您在此处选择锚标签。

【解决方案2】：

您可以改用选择器，也可以使用点符号直接访问属性。如果您尝试定位链接中的图像：

function(){
    var image = document.querySelector(".MagicZoomPlus > img");
    // get
    console.log(image.src);
    // or set the image source
    image.src = "https://example.com/hello.jpg";
    return image;
}

【讨论】：

【解决方案3】：

这是我最终想出的，可行。

function myFunc() {
  var img = document.querySelector(".MagicZoomPlus img");

  return img.src
}

【讨论】：