codesandbox中图片不显示或错位，需将图片放入public目录用绝对路径引用，或用import导入；css居中需确保父容器display类型匹配text-align或flex属性；注意文件路径大小写敏感及svg导入方式差异。
图片在CodeSandbox里不显示或错位，先看路径对不对
CodeSandbox 默认不支持直接读取本地文件系统，img src="images/logo.png" 这种相对路径会 404——它不是在你电脑上跑，而是在沙盒虚拟机里运行。必须把图片作为“静态资源”显式引入。
- 放进
public/目录（如public/avatar.jpg），然后用绝对路径：<img src="/avatar.jpg"> - 或者用
import方式导入（适用于 React/Vue 等）：import avatar from "./assets/avatar.jpg"; <img src="%7Bavatar%7D"> - 别用
file:///或桌面绝对路径，沙盒根本访问不到
CSS align-items / text-align 不生效？检查父容器 display 类型
图片默认是 inline 元素，text-align: center 只对 inline 子元素起作用，但前提是父容器得是 block 且有明确宽度；而 align-items 必须配合 Flex 布局才有效。
- 想水平居中：父容器加
style="text-align: center;"（简单直接），或style="display: flex; justify-content: center;" - 想垂直居中：父容器需设高度 +
display: flex; align-items: center;，光写align-items没用 -
vertical-align对块级图片无效，只影响 inline/inline-block 元素的基线对齐
React 项目里图片一闪而过或加载失败，留意 import 路径大小写和扩展名
CodeSandbox 的文件系统区分大小写，import Icon from "./icons/Check.svg" 和实际文件叫 check.svg 就会报 Module not found 错误，控制台显示红字。
- 检查文件名是否完全一致（包括 .png/.PNG、.jpg/.jpeg）
- 如果用 Vite，SVG 默认当组件处理，
import { ReactComponent as Logo } from "./logo.svg"才能当 JSX 渲染；普通import logo from "./logo.svg"得到的是字符串 URL - 静态资源放
public/下最省心，但不能用import，只能用字符串路径
图片对齐本身不难，难的是 CodeSandbox 把“本地开发直觉”全重写了——路径是沙盒里的路径，CSS 生效依赖真实 DOM 结构，而热更新有时还会缓存旧资源。改完记得硬刷（Ctrl+F5），别只点预览刷新按钮。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
