本地图片必须放public/目录下，路径以/开头如bg-[url('/img.jpg')]；仅设图源无效，须搭配bg-cover、bg-no-repeat、bg-center等行为类及容器宽高才可见。
本地图片路径必须放 public/ 目录下
Tailwind 的 bg-[url()] 不走构建工具的模块解析，它直接按浏览器最终请求路径拼接 URL。Vite、Next.js 等框架把 public/ 内文件映射到根路径，所以图片必须放 public/img/hero.jpg，然后写 bg-[url('/img/hero.jpg')] —— 写 ./src/assets/hero.jpg 或 /src/assets/hero.jpg 都会 404。
常见错误：把图放进 src/assets 后直接用 bg-[url('./assets/hero.jpg')]，结果 Network 标签页里看到请求 http://localhost:3000/src/assets/hero.jpg，状态码 404。
- 确认图片在
public/下（比如public/images/bg-pattern.svg） - URL 路径以
/开头，对应站点根目录：bg-[url('/images/bg-pattern.svg')] - 不要加
public这一级：bg-[url('/public/images/...')]是错的
bg-[url()] 必须搭配行为类才可见
只写 bg-[url('/img.jpg')]，浏览器会按默认 background-repeat: repeat; background-size: auto; 渲染——小图平铺满屏，大图只显示左上角一截，看起来像“没生效”。这不是路径问题，是 CSS 行为缺失。
- 必加尺寸控制：
bg-cover（缩放填满）、bg-contain（完整显示）、或bg-[size:800px_600px] - 必加重复控制：
bg-no-repeat（防平铺），或bg-repeat（明确要平铺） - 必加定位控制：
bg-center、bg-top、bg-[50px_30px]（注意无空格） - 典型组合：
bg-[url('/hero.jpg')] bg-cover bg-center bg-no-repeat
容器必须有宽高，否则背景图“消失”
如果父元素没设 width 或 height，且内部无内容撑开，它的计算高度就是 0 —— 背景图再大也渲染不出来。这不是 Tailwind 的 bug，是 CSS 基础规则。
- 常见场景：空 div 作背景容器，只写了
bg-[url(...)]，没写h-64或min-h-screen - 响应式容器可用
aspect-[16/9]+h-0 pb-[56.25%]强制等比占位（需配合relative和absolute子元素） - 全屏背景必须用
min-h-[100dvh]，不用h-screen（移动端地址栏收放会导致高度跳变）
动态插入背景图时，别拼接用户输入
用 bg-[url('${userInput}')] 极易触发 XSS：userInput = "') onerror=alert(1) //" 会变成 background-image: url('') onerror=alert(1) //');。Tailwind 不做转义，原样注入 style 属性。
- 安全做法：用预设值映射，比如
{'hero': 'bg-hero', 'banner': 'bg-banner'}，再根据用户输入取 class 名 - 若必须动态路径，只允许白名单单位：
^\d+(px|rem|%|em)$或固定关键词top/center/bottom - 内联 SVG 必须手动 URL 编码：
#→%23，→ <code>%3C，>→%3E，且整个 data URL 用双引号包裹
bg-[url()] 写法，而是路径相对于 public、容器有没有实际像素尺寸、以及任意值语法里漏掉单位或多了空格 —— 这些地方一错，图就彻底不出现，连 Network 请求都看不到。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
