当我在 div 中使用 bg 时，本地图像的背景图像问题

Question

我在 tailwind css 中遇到问题，当我使用 bg-[url('.assets/images.png')]" 这些不起作用时，我将在线图像地址放在图像即将到来时，本地图像可能是什么问题我很沮丧，但没有得到任何解决方案

解释会有所帮助，正确的语法会有所帮助

Answer 1

我不知道 tailwind css 的语法，但看起来您的路径“.assets/images.png”由于“.assets”部分而无效。 尝试找出您的图像与生成的 css 文件相关的位置。

如果他们组织得像

assets/
  images/
  css/
    styles.css

你可以写

bg-"[url('../images/images.png')]"

如果它像

assets/
  images/
public/
  css/
    styles.css

你可以写

bg-"[url('../../assets/images.png')]"

但正如我所说，我不知道顺风。

在看到您的屏幕截图和文件组织后，我认为

class= "bg-url[('Assets/images.png')]"

将导致成功，因为您的资产文件夹与您的 index.html 位于同一文件夹中，将路径写在引号内而不是括号内似乎是个好主意。

Answer 2

在您的代码中有错字， url在[]之外

改变

bg-url['(<imagepath)']

到

bg-[url('<imagepath>')]

---

额外：程序：

使用资产图像时，请确保通过编辑tailwind.config.js文件的theme.backgroundImage部分添加自己的背景图像：

tailwind.config.cs

module.exports = {
  theme: {
    extend: {
      backgroundImage: {
        'images': "url('.assets/images.png')", 👈 add your image here
        
      }
    }
  }
}

然后将其用作

<div class="bg-[url('/img/hero-pattern.svg')]">
  <!-- ... -->
</div>

参考： https://tailwindcss.com/docs/background-image