[Vuejs]-Why does Vue convert my single quotes to double quotes in my background-image url?

by

1👍

✅

Why does Vue convert my single quotes to double quotes in my background-image url?

It doesn’t.

See the following example, which isn’t using any libraries at all:

const el = document.getElementById('div')

el.style.backgroundImage = 'url(https://vuejs.org/images/logo.png)'

console.log(el.style.backgroundImage)
console.log(el.outerHTML)
#div {
  height: 100px;
  width: 100px;
}
<div id="div"></div>

Notice that the console logging has " characters around the URL even though they didn’t appear in the original value. Those are encoded to &quot; within the HTML, which is correct.

The browser is normalizing the value. It shouldn’t make any difference to the URL that is requested from the server. If your image isn’t loading the quotes are not the problem. That should be evident by checking the URL being used to load the image in the Network tab of your browser’s developer tools.

👤skirtle

Leave a comment