如何在rails 6中的vue组件内部设置背景图像

Question

我正在尝试在一个vue组件中设置背景图像。我在用铁轨6。图像位于app/assets/images文件夹中。vue组件位于app/javascripts/pages/Login.vue内部

以下代码有效：

<v-img :src="require('../../assets/images/logo.png')"/>

然而，这不起作用：

<v-flex xs3 :style="'background-image: url(' + require('../../assets/images/site-banner.png') + ')'">
...
</v-flex>

感谢您的帮助。谢谢

Answer 1

我建议您应该删除：样式中的require，并确保图像的路径可以从url访问。Require是javascript导入的关键字，而不是：style，或者您可以将图像的路径指定为数据属性以添加到:style

我在当地做了这件事，它起到了的作用

const imagePath = 'YOUR_HOST_NAME/assets/logo.png';
export default {
computed: {
myStyle() {
return {"background-image": 'url(' + imagePath + ')'}
}
}

然后可以使用myStyle作为:style="myStyle"