需求:工作中突然需要我动态配置项目登录页的背景图片,于是我直接使用了require,可是需求稍微有点不一样,用后端存放我们的前端本地的图片地址,通过接口获取,然后再动态配置
<div class="login-container" :style="{ backgroundImage: 'url(' + backgroundImage + ')' }" v-loading="listLoading">
</div>
这里的require我尝试了很多方式,请不要怀疑是格式问题
错误演示通过变量赋值 直接报错
let url = '../../assets/login_images/tianjin.jpg'
state.backgroundImage = require(url)
正确写法
state.backgroundImage = require('../../assets/login_images/tianjin.jpg')
看上去好像区别不大,搞了一下午,查阅大量资料,最后发现require没办法使用变量引入,重点标注一下