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

【问题标题】：How to set backgrond image inside vue component in rails 6?如何在rails 6中的vue组件内设置背景图像？
【发布时间】：2019-11-17 11:43:10
【问题描述】：

我正在尝试在其中一个 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>

感谢任何帮助。谢谢。

【问题讨论】：

标签： ruby-on-rails webpack webpacker ruby-on-rails-6

【解决方案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"

【讨论】：

您应该尝试将文件的路径提取为数据属性
首先尝试一些来自互联网的静态图片，看看它是否有效，如果您有任何问题，请在这里告诉我
更多参考：stackoverflow.com/questions/47313165/…
所以如果你做得好应该可以工作，现在有什么问题？
对不起，这是我的错误，原来图像是waroking，但v-flex 中的内容隐藏了它。我尝试在该元素中使用来自互联网的静态图像，但它也没有显示出来。修改 v-flex 中的内容后，它起作用了。感谢您的帮助。