I want to retrieve background image from this link https://20.detik.com/sosok/20220108-220109036/tangis-rindu-pak-ogah-pada-pak-raden but the output is null

<div  tabindex="-1" aria-disabled="false" style="background-image: url(&quot;https://cdnv.detik.com/videoservice/AdminTV/2022/01/08/Tangis_Rindu_Pak_Ogah_Pada_Pak_Raden-20220109001335-custom.jpg?w=400&amp;q=80&quot;); background-color: black; background-size: contain;"></div>

here is my code

    var c = document.createElement("html");
    c.innerHTML = content;
    body = c.getElementsByTagName('body')[0];

    //get poster url
    filmimg = body.getElementsByClassName("container-video")[0];
    div = filmimg.querySelector("div #detikVideoIdNewId video .vjs-poster");
    console.log(div);

CodePudding user response：

Try computedStyle

const style = window.getComputedStyle(
  document.querySelector(".vjs-poster")
)
console.log(style["backgroundImage"])

<div  tabindex="-1" aria-disabled="false" style="background-image: url(&quot;https://cdnv.detik.com/videoservice/AdminTV/2022/01/08/Tangis_Rindu_Pak_Ogah_Pada_Pak_Raden-20220109001335-custom.jpg?w=400&amp;q=80&quot;); background-color: black; background-size: contain;"></div>

CodePudding user response：

Looks like your querySelector is off. Try this:

let backgroundImage = document.getElementsByClassName("vjs-poster")[0].style["background-image"];
let url = backgroundImage.split("\"")[1];