how to find element that attribute include back slash [] with attribute selectors

I have an html Element like this:

<img src="safe-file://E:20217vhi9TKXoiaF7GOOQc0Z6o7nK.png" 
          data-id="safe-file://E:20217vhi9TKXoiaF7GOOQc0Z6o7nK.png"
          class="comic-img"
          data-v-d2c79dce>

I want to find it by document.querySelector('[data-id="safe-file://E:20217vhi9TKXoiaF7GOOQc0Z6o7nK.png"]')

But this didn’t work, anybody know why and how to find it by file name?

I can find img Element by

document.querySelector('[data-id*="2021"]')

but I can’t find it by

document.querySelector('[data-id*="20217"]')

It seems that any attribute selector with can’t find element I want.

Answer

Each needs to be double escaped. Replace each with \5c , or \\, so what you need is

document.querySelector('[data-id="safe-file://E:\5c 2021\5c 07\5c vhi9TKXoiaF7GOOQc0Z6o7nK.png"]')

or

document.querySelector('[data-id="safe-file://E:\\2021\\07\\vhi9TKXoiaF7GOOQc0Z6o7nK.png"]')

console.log(document.querySelector('[data-id="safe-file://E:c 2021c 07c vhi9TKXoiaF7GOOQc0Z6o7nK.png"]'))
<img src="safe-file://E:20217vhi9TKXoiaF7GOOQc0Z6o7nK.png" 
          data-id="safe-file://E:20217vhi9TKXoiaF7GOOQc0Z6o7nK.png"
          class="comic-img"
          data-v-d2c79dce>

console.log(document.querySelector('[data-id="safe-file://E:\21\\\vhi9TKXoiaF7GOOQc0Z6o7nK.png"]'))
<img src="safe-file://E:20217vhi9TKXoiaF7GOOQc0Z6o7nK.png" 
          data-id="safe-file://E:20217vhi9TKXoiaF7GOOQc0Z6o7nK.png"
          class="comic-img"
          data-v-d2c79dce>