使用顺风从资产管道插入背景图像答案

【问题标题】：Inserting a background-image from asset pipeline with tailwind使用顺风从资产管道插入背景图像
【发布时间】：2021-06-24 19:12:08
【问题描述】：

我一直在尝试借助 Tailwind 在我的项目中添加背景图片，但它不起作用，我猜是因为某处的资产管道冲突？

我尝试过的：

直接在我的tailwind.config 中插入图像，如下所示： 'essential-oil': "url('/assets/images/essential-oil.png')", 'essential-oil': "asset-url('essential-oil.png')"
使用style: "background-image:url(/assets/images/essential-oil.png) 在我的 HTML 中直接插入图像
将我的图像放在应用程序的其他位置，例如Public

这些解决方案都不起作用。更糟糕的是，我的所有样式充其量都从我的 HTML 中消失了，样式看起来不错，但图片不存在。有什么想法吗？

谢谢。

【问题讨论】：

在 rails scss 中，您可以使用 image-url() 而不是 url。这会在编译资产后映射正确的文件。我不确定您的顺风生产构建过程是否包含在您的资产管道中。如果没有，您必须将图像放在您的公共文件夹中。

标签： ruby-on-rails asset-pipeline tailwind-css

【解决方案1】：

将图像移动到公用文件夹中
参考tailwind.config.js中的图片

module.exports = {

  theme: {
    extend: {
      backgroundImage: {
       'hero-pattern': "url('/assets/icon-arrows-left.svg')",
      }
    }
  }
}

【讨论】：