使用 javascript 动态显示图像 URL

Question

我正在使用跟踪代码管理器，通过自定义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>

Answer 1

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

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

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

然后简单地return imageSrc

有关 Mozilla 开发者网络的更多信息

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

Answer 3

这就是我最终想出的，它有效。

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