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

问题描述 投票:0回答:3

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

谢谢你。

ruby-on-rails asset-pipeline tailwind-css
3个回答
4
投票

您可以执行以下操作:

  1. 将图片移动到asset pipeline目录下
    app/assets
  2. 参考tailwind.config.js中的新资源
module.exports = {
    theme: {
        extend: {
            backgroundImage: {
                'essential-oil': "url('essential-oil.png')"
            }
        }
    }
}
  1. 参考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 指南 - 资产管道


0
投票
  1. 将图像移至公共文件夹
  2. 请参阅
    tailwind.config.js
  3. 中的图片
module.exports = {

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

0
投票

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

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

© www.soinside.com 2019 - 2024. All rights reserved.