使用 javascript 动态显示图像 url

Question

我正在使用标签管理器通过自定义 javascript 将来自网站的信息动态放置到 html 元素中。我现在的代码是这样的。 PS 我不知道如何 post 正确。这实际上以

开头

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

这个returns下面的调试信息

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() 函数只是 returns 具有属性值的字符串，如果属性不存在则为 null。

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

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

然后简单地 return imageSrc

有关 mozilla developper network

的更多信息

Answer 2

您可以改用选择器，也可以直接使用点表示法访问属性。如果您尝试定位 link 内的图像：

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
}

使用 javascript 动态显示图像 url

Dynamically display an image url with javascript

javascript

image

unreachable-code