Vue.js导入图像
Vue.js导入图像
提问于 2018-06-07 21:44:40
因此，我正在制作一个带有控制面板的应用程序，我希望能够在应用程序中动态更改一些图像，但我的问题是，它就是不起作用
这是我正在尝试更改的div
<div class="bg-image bg-parallax overlay" :style="`background-image:url(${bg1url})`"></div>这是Home.vue文件的脚本部分
<script>
import axios from 'axios';
export default {
name: 'Home', // this is the name of the component
data () {
return{
page_data: {},
bg1url: null,
};
},
created() {
axios.get("http://localhost:5001/api/v1/pages")
.then((result) => {this.page_data = result.data.page_data});
this.bg1url = require('@/assets/img/' + this.page_data.background1);
alert(page_data.background1);
},
};
</script>我已经尝试了关于堆栈溢出的大多数建议，但似乎都不起作用。我使用默认的webpack配置和生成的结构
注意:使用axios从后端获取的部件可以正常工作。唯一的问题是将图像添加到样式中。
回答 1
Stack Overflow用户
发布于 2018-06-08 05:11:53
我认为可能是因为您正在设置bg1url outsite of promise (axios的回调函数)的值，因此这会使代码同步而不是异步
因此，请尝试更新，请使用以下内容
created() {
axios.get("http://localhost:5001/api/v1/pages").then(result => {
this.page_data = result.data.page_data
this.bg1url = require('@/assets/img/' + this.page_data.background1);
});
},页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50742850
复制相关文章
相似问题