Как прокинуть путь с кавычками в стили?

Question

[origami1024]

<div
    :style="{
        backgroundImage: `url('${'http://abcd.efg/' + this.product.url}')`
    }"
/>

В this.product.url бывает одна одинарная кавычка и это разламывает стили.
Двойная кавычка по идее тоже может быть
Да и еще закрывающиеся скобочки есть, на случай, чтоб url() без кавычек не прокатывало.
Пример this.product.url: /storage/N'red%20HD%20Plus%20(1).jpg

PS. Поменял тег вопроса с Vue на CSS

Answer 1

[Aetae]

Vue тут не причём. Обычный css. Очевидный ответ - экранировать кавычки.this.product.url.replace(/'/g, '\\$&')

Comments

[origami1024]

\\$& - особое редкое экранирование какое-то, как нагуглить?

[Aetae]

origami1024, это replace метод строки. $& - найденное совпадение целиком. В данном случае это равносильно .replace(/'/g, "\\'").
Но если бы вдруг понадобилось экранировать несколько символов, то тут оно бы пригодилось.)