在next.js中使用tailwindcss添加背景图片的图片路径问题

1.tailwindcss官网文档有自定义背景

 // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        backgroundImage: {
         'hero-pattern': "url('/img/hero-pattern.svg')",
         'footer-texture': "url('/img/footer-texture.png')",
        }
      }
    }
  }

 

这些类将采用 bg-{key} 的形式，所以 hero-pattern 将变成 bg-hero-pattern。

2.图片路径问题

我把图片放在了public中

图片路径写成'tree1': "url('/public/tree1.jpg')" 使用bg-tree1,图片不显示。

module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  content: [],
  theme: {
    extend: {
      backgroundImage: {
       'tree1': "url('/public/tree1.jpg')",
      }
    }
  },
  plugins: [],
}

 

把路径改为

'tree1': "url('./public/tree1.jpg')",

在此文件下找图片路径依旧不对。

之后发现与tree1.jpg在同一文件夹public的favicon.ico在浏览器中的路径是这样的

 

 

而我自己添加的tree1.jpg的路径是这样

 所以将路径改为：

'tree1': "url('/tree1.jpg')",

图片显示了。 

 图片放在public里路径这样写是对的，如果放在别的地方还是找不到，现在还没找到方法解决。