如何在 next.js 中使用 tailwind 背景图片? [复制]

2024-01-05

我在公共文件夹中有一张背景图片,名为bg.png

在页面文件夹的index.js页面中,我想使用该图像作为背景图像

我已经按照他们的官方网站的文档安装了 tailwind 。

我已经尝试过这个,但它不起作用。

从“../public/bg.png”导入BG;

return (
  <div
    className="bg-scroll"
    style={{
      backgroundImage: `url(${BG})`,
      height: "972px",
    }}
  >
  </div>
)

它不显示图像。


当您在公共文件夹中拥有资产时,无需定义所有确切路径。

  <div
   className="bg-scroll"
   style={{
    backgroundImage: `url('/bg.png')`,
     height: "972px",
    }}
  >
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 next.js 中使用 tailwind 背景图片? [复制] 的相关文章

  • 将一个 div 垂直居中对齐到另一个 div 中

    说我有 div class outer div class inner some stuff div div 内部 div 具有动态高度 它根据 div 内部的内容而变化 外部 div 只是一个容器 设置为具有窗口的高度 我想将其设置为使内
  • 当通过 javascript 填充输入框时,使物化标签移出输入框

    通常情况下 与物化 http materializecss com 文本输入框的标签显示在输入框中 直到用户选择该框并在其中输入文本 但是 当通过 javascript 填充框的值时 标签不会移开 它保留在框中并与输入的文本重叠 有没有办法
  • 项目之间的点线

    我正在建立一个餐厅网站和菜单 我需要在菜单项和价格之间画一条 点线 我需要得到它 而不需要手动一一写点 此功能应该自动工作 是否可以使用 span 或 div 等背景来创建它 我拥有的 我想要的是 我想你正在寻找这样的东西 html div
  • 浏览器特定的 CSS 属性

    在哪里可以找到完整的 浏览器特定 css 属性 参考 我的意思是一些属性 例如 moz border radius这仅适用于 Firefox 或 webkit min device pixel ratio 这些示例仅适用于指定的 Web 浏
  • scrapy获取同一个类的第n个子文本

    我附上了一张照片 我面临的问题是获取同一类的第一个元素 我想得到 adxHeader gt adxExtraInfo 1st one gt adxExtraInfoPart 1st one gt a text 我编写了以下代码但不起作用 任
  • 一个 Next.js 路由中的两个不同子域

    我想使用构建一个新平台Next js https nextjs org React js https reactjs org and 反应路由器 https reacttraining com react router web guides
  • JSDoc:如何在生成的文档中包含自定义 css 文件模板?

    JS文档docs https jsdoc app about configuring default template html say 将图像目录复制到输出目录 复制全部 将 myproject static 中的静态文件复制到输出目录
  • 滚动时静态标题

    我编写了一个主页 现在我正在尝试构建一个标题 该标题是静态的 就像在滚动内容时不滚动一样 当内容位于其下方时 它应该保持在顶部 我找到了这个解决方案here https stackoverflow com questions 9677894
  • 如何使用 CSS 将 div 置于表格中心?

    我正在尝试向我的网站之一添加幻灯片 整个页面布局在一个 HTML 表格中 我非常讨厌它并且没有选择 我想将我的幻灯片放在该特定列的中心 我的 CSS 如下所示 slideshow position relative slideshow IM
  • Django 1.6 的静态文件

    我花了一整天但没有任何作用 我在这里看到了至少 20 篇关于同一主题的帖子 它们各不相同 有不同的建议 但没有一个对我有用 使用 Python 2 7 运行 Django 1 6 我正在尝试从 django 教程加载民意调查应用程序的 cs
  • Bootstrap:下拉菜单无法通过 jQuery 单击打开

    我正在创建一个包含多行的表 所有行都有一个 选项 按钮 该按钮应该显示下拉上下文菜单 为了使代码更短 我使用了一个div以便将其重用为上下文菜单的通用标记 我正在使用 Bootstrap 5 1 3 和 jQuery 3 6 0 以下是我的
  • 有不同图像尺寸的缩略图 Bootstrap

    我想要包含不同大小和不同文本量的图像的缩略图 但我希望它们都具有相同的大小 像这样来自 Bootstrap 站点的示例 http getbootstrap com components thumbnails custom content 下
  • 使用百分比 (%) 时如何计算填充?

    为什么本例中的内边距不等于 300 像素 Test width 600px padding right 50 box sizing border box background ddd div TEXT ETISI DHOASIHD I SA
  • Bootstrap 列中的标题高度相同

    我有这样的 html bootstrap css div class container div class row div class col xs 6 col div class block div class title strong
  • 无法在scrollView中滚动

    我有一个屏幕 我可以在输入字段中输入内容并获得相应的搜索结果 该列表在 ScrollView 中呈现 但当键盘打开时 在 Android 中 它仍然不允许我滚动 我怎样才能解决这个问题 return lt gt addressesFound
  • CSS 计数器输出不匹配

    有人可以解释一下为什么吗section计数器值总共打印 0h2 tags 这是源代码
  • 电子邮件模板 - MS Office Outlook 365 中不显示表格背景图像

    为了电子邮件模板的目的 我需要在 table 它包含图像上的文本 现在我已经尝试过 https stackoverflow com a 15620571 6191987 https stackoverflow com a 15620571
  • jQuery - 拖动div css背景

    我希望能够在 div 内按住鼠标并移动它的背景 在谷歌上搜索了很多 没有找到我想要的 这是目标 显示的地图是要拖动的对象 http pontografico net pvt gamemap http pontografico net pvt
  • 全新安装 create-next-app 后,无效的 href 传递给路由器错误

    在我的本地计算机上安装 nextjs 应用程序后 使用create next app我在控制台中收到此错误Invalid href passed to router 有谁知道如何解决它 我尝试使用to属性而不是href属性在Link组件的但
  • 从 3.1 返回后加载 Rails 3(服务器)时出现问题

    Rails 完全菜鸟 我正在使用 Hartl 教程 到了第 4 章 CSS 4 1 2 一切看起来都很顺利 但遇到了一个问题 使页面上的文字看起来

随机推荐

  • 在特定变量上禁用 GCC“可能未初始化就使用”

    我在堆栈变量上收到此警告 warning object member may be used uninitialized in this function 在这种情况下 我不希望强制初始化只是为了消除警告 因为它会消耗 CPU 周期 该变量
  • 根据值降序对 Map 进行排序 [重复]

    这个问题在这里已经有答案了 可能的重复 如何在 Java 中对 Map 的值进行排序 https stackoverflow com questions 109383 how to sort a mapkey value on the va
  • 如何取消注册设置为 jQuery.ajaxStart() 函数的处理程序?

    我尝试做 ajaxStart function 但它不是取代它 而是附加的 如果我理解的话 你想删除ajaxStart来自元素的处理程序 如果是这样 只需使用 jQueryunbind 因为处理程序是作为事件附加的 selector unb
  • 将 Xpath 转换为 CSS 选择器

    我正在努力将以下 Xpath 转换为 CSS form id giftcard form div 3 div button 我知道我可以将 Xpath 用于我的 selenium JS 但由于某些奇怪的原因 它在我的情况下不起作用 我成功地
  • 私有继承、友元和异常处理

    当类 A 私有地继承自类 B 时 意味着 B 是 A 的私有基类子对象 但对于友元来说不是这样 对于友元来说 它是公共子对象 当有多个 catch 处理程序时 第一个匹配的处理程序 即 如果异常类型可以隐式转换为处理程序的参数类型 将被调用
  • Excel 在 CSV 导出中导出数百个空列

    在开始之前 我使用的是 Excel for Mac 2011 我在使用特定的 Excel 电子表格时遇到问题 当我将任何活动工作表导出为 CSV Windows CSV 格式 时 它会导出约 200 个空白列以及 7 或 8 个填充列 我过
  • 使用 jquery 从复选框列表附加文本

    我正在从事 ASP NET 项目 我的任务是附加Checkbox文本到TextBox 复选框的文本从数据库值绑定复选框列表 protected void prbtn Click object sender EventArgs e strin
  • C# 中的 WinForms Aero 向导?

    我正在寻找在 WinForms 中实现一个向导 C notWPF 我希望它符合 Aero Wizard 指南 谁能指点我一些示例代码吗 Codeplex 上有两个项目 航空玻璃供应商 http aeroglassprovider codep
  • 有没有类似Solr分析工具的Elasticsearch插件?

    Solr 内置了 分析画面 https cwiki apache org confluence display solr Analysis Screen 这有助于调试特定字段类型的分词器和过滤器之间的相互作用 ElasticSearch 有
  • 如何使用 AngularJS 指令中的编译函数来重复服务中的元素

    请有人告诉我需要做什么才能在指令中呈现存储在服务中的数组中的新元素 在下面的示例中 来自服务的警报显示每个新元素都已添加到 elements 数组中 但是如何使指令在页面上显示这些新元素呢 我尝试阅读有关的所有内容compile指令中的函数
  • 如何找出 .NET Windows 窗体中哪个控件具有焦点?

    如何找出哪个控件具有焦点Windows 窗体 http en wikipedia org wiki Windows Forms Form ActiveControl http msdn microsoft com en us library
  • 如何通过 super 关键字调用基类方法

    class base public void superMethod System out println Hello i m a super class method class der extends base super superM
  • DELETE FROM `table` AS `alias` ... WHERE `alias`.`column` ...为什么语法错误?

    我用 MySQL 尝试过 DELETE FROM contact hostcommands relation AS ContactHostCommand WHERE ContactHostCommand chr id 999999 LIMI
  • 配方还产生需要包装的本地输出

    我有一个配方 可以成功调用遗留构建命令来交叉编译目标 作为副作用 它会生成一些在构建中使用的自定义本机工具 我想将这些工具转化为 tools native包允许其他食谱依赖主包来访问工件 并使用 tools native包以进一步处理这些工
  • 如何在 Fabric.js 中的画布之间拖放

    据我所知 Fabric js 内置了对同一画布内拖放操作的支持 我们怎样才能让它适用于多个画布 或者来自非画布 html 元素 例如表格中的图像 在 Fabric js 中可以在画布之间进行拖放 但涉及对私有属性的一些操作 为此原因不保证它
  • 错误代码 128 是什么?

    什么是 git remote http 错误代码 128 当我尝试推送到需要身份验证的存储库时 它从不要求输入密码 就会发生这种情况 是否有一些中心位置可以找出错误代码的含义 128是默认的致命错误代码 这并不意味着它一定与身份验证有关 这
  • 使用 QIODevice 的阻塞接口(QTcpSocket 和 QFile)时何时检查错误

    出于学习目的 我制作了通过网络发送文件的应用程序 这对我来说非常有效 这里我将发布主要部分的代码 实际发送字节的代码 我认为这就足够了 我的主要问题是 我应该何时 何地 为何以及如何检查错误 看起来不止一个问题 正如您所看到的 我通过检查每
  • 选择显示输入 AngularJS 中的值

    我需要做这样的事情 当你选择 ex 登录 然后在输入文本中显示login from scope logins与password JS scope logins login log password pass HTML
  • 在java中展平嵌套数组

    我想展平嵌套数组 例如 1 2 3 4 gt 1 2 3 4 在java中手动我找不到线索 S 我尝试过手动java脚本指南 但没有得到解决方案 public static void main String args Object arr
  • 如何在 next.js 中使用 tailwind 背景图片? [复制]

    这个问题在这里已经有答案了 我在公共文件夹中有一张背景图片 名为bg png 在页面文件夹的index js页面中 我想使用该图像作为背景图像 我已经按照他们的官方网站的文档安装了 tailwind 我已经尝试过这个 但它不起作用 从 pu