React项目中img标签仅显示轮廓无法加载图片的求助

先看你代码里的两个核心语法错误，这是图片加载失败的直接原因：

• img标签的属性拼写错误：scr应该是src，浏览器无法识别scr属性，自然找不到图片路径
• alt属性值未用引号包裹，JSX中字符串必须用引号包裹，要写成alt="this is a img"

修正后的React组件代码：

import img from "../assets/img.svg";
import styles from './你的样式文件名.module.css'; // 确保正确引入样式文件

export default function Landing() {
  return (
    <img src={img} alt="this is a img" className={styles.img} />
  );
}

额外补充几个检查点：

• 确认../assets/img.svg路径正确，图片文件确实存在于对应目录中
• 如果使用CSS Modules，要确保样式文件的引入方式正确
• z-index在这里完全没必要，图片加载失败和层级无关，那个方形轮廓是浏览器显示的图片占位（因alt文本存在但图片未加载）

按上述步骤修改后，图片应该能正常显示。

内容的提问来源于stack exchange，提问作者Luuk van Dijk