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

Question

我正在尝试在其中一个 vue 组件中设置背景图片。我正在使用 rails 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

我建议您删除 :style 中的 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"

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

How to set backgrond image inside vue component in rails 6?

ruby-on-rails

webpack

webpacker

ruby-on-rails-6