提问人：codesforjenuel 提问时间：11/18/2023 更新时间：11/18/2023 访问量：22
使用模板文字和 Tailwind css 时图像未呈现的 url
url for images not rendering when using template literals and Tailwind css
问：
我使用模板文字将获取的 url 从我的数据库传递到我的 react 前端，但是，图像不会呈现，只有当我直接对 URL 进行硬编码时，这是我的代码：
import React, { useState, useEffect } from "react";
const Dotw = () => {
const [driverHero, setDriverHero] = useState("");
useEffect(() => {
const fetchData = async () => {
const result = await fetch(URL);
result.json().then((data) => {
console.log(data)
setDriverHero(data.heroImage);
});
};
fetchData();
}, []);
return (
<div className={`w-full h-40 md:h-96 lg:h-96 max-w-screen-lg bg-no-repeat bg-cover bg-center lg:bg-center bg-[url('${driverHero}')]`}></div>
);
};
export default Dotw;
它在控制台上显示：
当我使用 img 标签并将 src 设置为 driverHero 状态时，它起作用，但在用作背景图像时不提供相同的 UI
答：
1赞
Rico
11/18/2023
#1
Tailwind 如何提取类名的最重要含义是，它只会在源文件中查找作为完整不间断字符串存在的类。
如果使用字符串插值或将部分类名连接在一起，Tailwind 将找不到它们，因此不会生成相应的 CSS。
我建议将背景放在 div 的样式道具中，如下所示：
<div
className={`w-full h-40 md:h-96 lg:h-96 max-w-screen-lg bg-no-repeat bg-cover bg-center lg:bg-center`}
style={{backgroundImage: `url(${driverHero})`}}
></div>
评论