get file from directory in vue.js component

Question

I tried to render image in my website that made with vue.js

the file i want is here D:\programing\mr_dan\assets\img\bkgds\cheesecloth-herbs-bk.jpg

and component of vue in D:\programing\mr_dan\src\components\Home.vue

this the code of home.vue

<div style="background-image:url(../../assets/img/bkgds/cheesecloth-herbs-bk.jpg);">

provide more information. are you using any build tool like webpack or running vue in a static html page? — Dipu
– Dipu, Commented Apr 9, 2018 at 18:34

acdcjunior · Accepted Answer · 2018-04-09 18:42:51Z

0

Vue cli's WebPack is probably not parsing that content as an asset. One workaround is to use require():

<div :style="'background-image:url(' + require('../../assets/img/bkgds/cheesecloth-herbs-bk.jpg') + ');'">

answered Apr 9, 2018 at 18:42

acdcjunior

136k37 gold badges341 silver badges312 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1