从 vue.js 组件中的目录获取文件

Question

我尝试在我的网站中渲染使用 vue.js 制作的图像

我要的文件在这里 D:\programing\mr_dan\assets\img\bkgds\cheesecloth-herbs-bk.jpg

和vue in的组件 D:\programing\mr_dan\src\components\Home.vue

这是 home.vue

的代码

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

Answer 1

Vue cli 的 WebPack 可能不会将该内容解析为资产。一种解决方法是使用require()：

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

检查demo CodeSandbox here。