ElectronからCSSのurl()を動的に使う場合の注意点

概要

JSからelement.style.backgroundImageなどを設定するとき、
画像のパスを普通に
require("path").resolve('../image/hoge.jpg')
や
__dirname + '/image/hoge.jpg'
でurl()に渡すと失敗する

結論

(Windowsでは)__dirnameのパスの取得やrequire("path").resolve()による相対パスの解決後のパスの区切りは\
しかし、CSSのurl()では\をエスケープとみなすので/に置換しなければならない
つまり

element.style.backgroundImage = 'url(' + require("path").resolve(path).replace(/\\/g, '\/') + ')'

としなければCSSは正しいパスを解釈しない。

検証環境

• Windows7 Professional 64bit
• electron-prebuilt 0.36.4
• node v5.2.0