1

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 class="vjs-poster" 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);
fathimah
  • 31
  • 5
  • You are not giving us all the information we need. Where is this running? Some kind of web scraping tool? – mplungjan Feb 21 '22 at 05:47

2 Answers2

0

Try computedStyle

const style = window.getComputedStyle(
  document.querySelector(".vjs-poster")
)
console.log(style["backgroundImage"])
<div class="vjs-poster" 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>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
  • it showed an error for me. throw new TypeError(`${context} is not of type 'Element'.`); ^ TypeError: The provided value is not of type 'Element'. – fathimah Feb 20 '22 at 20:03
0

Looks like your querySelector is off. Try this:

let backgroundImage = document.getElementsByClassName("vjs-poster")[0].style["background-image"];
let url = backgroundImage.split("\"")[1];
Blake Gearin
  • 175
  • 1
  • 10
  • it showed an error for me. TypeError: Cannot read properties of null (reading 'style') – fathimah Feb 20 '22 at 19:52
  • I have made changes to my code above. – fathimah Feb 20 '22 at 19:59
  • Understood. I added more of my code defining `body` and `filming` – Blake Gearin Feb 20 '22 at 20:10
  • It still showed an error. TypeError: Cannot read properties of null (reading 'style'). My variable content contains an HTML page source. While I tried to inspect element and view page source, they have a different source. When I open with view page source it doesn't contain .vjs-poster . Does it impact my code? – fathimah Feb 20 '22 at 20:32
  • I think you need to specify where and how you're running this JS code. If you go the URL listed above, right click, select `Inspect`, and run this code in the console it works fine. I went ahead and reduced my code though since you can accomplish the same thing in 1-2 lines. – Blake Gearin Feb 20 '22 at 20:47