search

1day-release / 1day-release-site

0 stars 0 forks source link

SVG画像を背景に指定するとエラーになるよ #4 に対応 #6

Open ryoju-ohata opened 5 years ago

ryoju-ohata commented 5 years ago

importの内部で指定しているbackgroundのurlは解析してくれないVueCliの不具合。 public/static/imgディレクトリに背景画像を配置し、静的に呼び出せるようにした苦肉の解決方法。

ryoju-ohata commented 5 years ago

対応したよ

ryoju-ohata commented 5 years ago

静的参照用の静的ディレクトリを削除し、style属性でrequireメソッドを使用するように対応。

<div class="cover" :style="{'background-image': `url(${require('./assets/bg_line.svg')})`}"></div>

${}はES6のテンプレートリテラル

// ES6記法
:style="{'プロパティ名': `url(${require('アセットパス')})`, 'font-size': 'red'...}"
// ES5記法(旧式)
:style="{'プロパティ名': 'url(' + require('アセットパス') + ')', 'font-size': 'red'...}"
nakayama-kirin commented 5 years ago

@passionate-engineer かくにん。 今の現状としてはHTML直書きであればSVGスタイル使用可能な感じ？

ryoju-ohata commented 5 years ago

@nakayama-kirin 

<div class="cover" :style="{'background-image': `url(${require('./assets/bg_line.svg')})`}"></div>

こんな感じにするだけで参照できるよ