如何从create-react-app项目内的代码呈现图像

要从create-react-app项目内的代码呈现图像，可以按照以下步骤进行：

确保你已经安装了create-react-app，并创建了一个新的项目。
在项目文件夹中打开终端，并运行以下命令安装必要的依赖：
在项目文件夹中打开终端，并运行以下命令安装必要的依赖：
这将安装React DOM和用于调整图像大小的库。
在你的项目中创建一个新的组件，例如ImageUploader.js，可以使用以下代码作为模板：

import React, { useState } from 'react';
import ImageResizer from 'react-image-file-resizer';

const ImageUploader = () => {
  const [selectedImage, setSelectedImage] = useState(null);

  const handleImageUpload = (event) => {
    const file = event.target.files[0];
    const reader = new FileReader();
    reader.onloadend = () => {
      setSelectedImage(reader.result);
      resizeImage(file); // 调整图像大小
    };
    reader.readAsDataURL(file);
  };

  const resizeImage = (file) => {
    ImageResizer.imageFileResizer(
      file,
      300, // 设置调整后的图像宽度
      300, // 设置调整后的图像高度
      'JPEG', // 设置图像格式
      100, // 设置图像质量（0-100）
      0, // 设置旋转角度（0为不旋转）
      (uri) => {
        // 处理调整后的图像
        console.log(uri);
      },
      'base64', // 图像输出格式（'base64', 'file', 'blob'）
      300, // 设置最大图像尺寸（可选）
      300 // 设置最小图像尺寸（可选）
    );
  };

  return (
    <div>
      <input type="file" accept="image/*" onChange={handleImageUpload} />
      {selectedImage && <img src={selectedImage} alt="Selected" />}
    </div>
  );
};

export default ImageUploader;

在你的项目中使用该组件，例如在App.js中添加以下代码：

import React from 'react';
import ImageUploader from './ImageUploader';

const App = () => {
  return (
    <div>
      <h1>图像上传</h1>
      <ImageUploader />
    </div>
  );
};

export default App;