Tailwind中如何为背景图片提供路径/URL?
P粉670107661
P粉670107661 2024-01-16 11:09:13
0
1
304

我在我的 React 项目中使用 Tailwind。我想在 div 中添加背景图像,但它显示以下错误:

Module not found: Error: Can't resolve '../../icons/blog-hero-1.png' in 'C:UsersDELLfrontend-developmentaidhumanity-practice-2src'

我正在添加顺风类

bg-[url('../../icons/blog-hero-1.png')]

用于添加背景图像,url 相对于当前文件,并且通过以下方式添加普通图像时也可以工作:

import Hero from "../../icons/blog-hero-1.png" 

谁能指导如何给出正确的网址?注意:我在这里还添加了一个codesandbox示例,以便更好地演示,其中我尝试在“Homepage.js”中导入背景图像,但它不起作用。 https://codesandbox.io/s/background-image-wl9104?file=/src/components/Homepage.js

P粉670107661
P粉670107661

全部回复 (1)
P粉921165181

您也可以使用以下方法获得相同的结果:

在您的tailwind.config.js文件中:

module.exports = { theme: { extend: { backgroundImage: { 'hero': "url('../../icons/blog-hero-1.png')" } }, }, plugins: [], }

您只需在类中提及bg-hero即可实现。

    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责声明 Sitemap
    PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!