使用 tailwind 从资源管道中插入背景图像

Question

我一直在尝试在我的项目中借助 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 中消失，样式看起来不错，但图片不存在。 有什么想法吗？

谢谢你。

Answer 1

您可以执行以下操作：

1. 将图片移动到asset pipeline目录下

   app/assets

   。
2. 参考tailwind.config.js中的新资源

module.exports = {
    theme: {
        extend: {
            backgroundImage: {
                'essential-oil': "url('essential-oil.png')"
            }
        }
    }
}

3. 参考HTML中的背景图片

  <div class="bg-essential-oil">
  </div>

详情

这是有效的，因为链轮已更改为支持指纹识别普通

url([asset-path])

引用。请参阅https://github.com/rails/sprockets-rails/pull/476。确保您使用的是 Sprockets 3.3.0 或更高版本。我在

tailwindcss-rails

存储库上打开问题后得到了答案：https://github.com/rails/tailwindcss-rails/issues/137#issuecomment-1025853968.

通过扩展，它也可以通过将 URL 内联来工作：

<div class="bg-[url('essential-oil.png')]">Has the essential oil background</div>

参考

Rails 指南 - 资产管道

Answer 2

1. 将图像移至公共文件夹
2. 请参阅

   tailwind.config.js

中的图片

module.exports = {

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

Answer 3

单引号是你的图像路径样式：“background-image:url('/assets/images/essential-oil.png')

参见https://github.com/rails/tailwindcss-rails/issues/129