为什么同时使用 tailwind 和 react 样式标签时我的 div 上的背景图片没有显示?

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

我正在使用 tailwind 构建登陆页面,并将其分成几个部分。我来到一个部分,我希望在特定的 div 上使用背景图像,以便它只显示在该特定部分中。我还打算在上面放一个按钮和文本框。问题是它不工作。我同时使用了 tailwind url() 和 react 样式标签 url(),它们中的任何一个都在工作。

这是反应风格标签版本:

import React from 'react'
import image from '../../public/images/Rectangle 37.png'

const ReadySection = () => {
  return (
    <div className="border-solid border-2 border-sky-500 h-[300px] " style={{backgroundImage: `url(${image})`}}  >
        
    </div>
  )
}

export default ReadySection

这是顺风版:

import React from 'react'

const ReadySection = () => {
  return (
    <div className="border-solid border-2 border-sky-500 h-[300px] bg-[url('frontend\public\images\Rectangle 37.png') " >
        
    </div>
  )
}

export default ReadySection

我做了 create-react-app 并命名了应用程序前端。所以本质上是图片的路径:

frontend/public/images/Rectangle 37.png

ReadySection.js的路径:

frontend/src/components/ReadySection.js 
reactjs url tags tailwind-css background-image
© www.soinside.com 2019 - 2024. All rights reserved.