用javascript动态显示图像url

Question

我使用标记管理器动态地将来自网站的信息放入使用自定义javascript的html元素中。我现在的代码是。我想不出如何正确地张贴。这实际上是从

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>

Answer 1

这就是我最后想出来的，这是可行的。

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

  return img.src
}

Answer 2

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

因此，要获得元素的src，即映像的url，您必须执行以下操作：

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

然后简单的return imageSrc

关于mozilla开发网络的更多信息

Answer 3

您可以使用选择器，也可以使用点标记直接访问属性。如果您试图在链接中锁定图像：

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;
}