React自定义函数返回图片持续报错，求助解决方法

你的代码主要存在以下几个问题，导致无法正常渲染图片：

• 组件命名不符合React规范：React要求自定义组件名称必须首字母大写，你定义的image函数首字母小写，React会将其识别为普通HTML标签而非自定义组件，引发报错。
• JSX中渲染元素的方式错误：在App组件的return语句里直接调用image()是无效的，需要将其作为组件使用（大写首字母后用<Image />），或者用大括号包裹表达式{image()}。
• 冗余语法：<img src={(img1)}/>中的括号完全多余，直接写成src={img1}即可。
• 缺失组件导入与属性错误：代码中使用了<Link>组件但未导入，且Link组件的正确属性是to而非value，这也会导致报错。
• 缺失组件导出：原代码未导出App组件，导致项目无法正常启动。

修正后的完整代码 #

import logo from './logo.svg';
import './App.css';
import img1 from './images/download.png';
// 若使用路由，需导入Link组件（若不需要可直接删除这一行及相关Link代码）
import { Link } from 'react-router-dom';

// 组件名首字母大写，符合React规范
function Image() {
  return (
    <img src={img1} alt="自定义图片" /> {/* 添加alt属性，符合Web无障碍规范 */}
  );
}

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
          Welcome to your first website!
        </p>
        {/* Link组件使用正确的to属性指定跳转路径 */}
        <Link to="/learn">Learn React!</Link>
        <Link to="/another">Another link!</Link>
      </header>
      {/* 以组件形式渲染自定义图片 */}
      <Image />
    </div>
  );
}

// 导出App组件，供项目入口文件调用
export default App;

额外说明 #

1. 若不需要路由功能，可直接删除所有与Link相关的代码，避免因未安装react-router-dom导致的报错。
2. 所有<img>标签都应添加alt属性，这是Web无障碍的基本要求，也能在图片加载失败时显示替代文本。

内容的提问来源于stack exchange，提问作者Ali Abid