我目前正在开发一个react web应用程序，其中我有一个输入类型“file”，用户应该使用它来上传图像。输入本身起作用，这意味着当单击按钮时，文件浏览器打开，可以选择文件。然而，在此之后，控制台抛出一个错误，其中指出：
Fetch API无法加载c：\fakepath\freies_projekt-17.jpg。不支持URL方案“c”。
Input作为Array of Inputs的一部分呈现，并具有以下属性。

{
      name: "image",
      component: (
        <Input type={"file"} accept="image/png, image/jpeg" name="image" />
      )
    },

使用这些属性，将呈现以下组件。

export default function Input({ type = "number", name, value, key }) {
  const { updateSettings } = useSettingsStore();
  return (
    <StyledLabel>
      <StyledInput
        type={type}
        onChange={e => updateSettings(e)}
        value={value}
      />
      {name}
    </StyledLabel>
  );
}

选择文件后，该文件的路径将存储在设置存储中。然后将其用于p5组件中

export default function Canvas() {
  let tileWidth;
  let img;
  const settings = useSettingsStore();
  const image = useSettingsStore(state => state.image);
  const { canvasSize, bgColor, tiles } = settings;
  console.log(settings.image);
  const preload = p => {
    img = p.loadImage(image);
  };
  const setup = (p, canvasParentRef) => {
    p.createCanvas(canvasSize.w, canvasSize.h).parent(canvasParentRef);
    p.strokeCap(p.SQUARE);
    p.pixelDensity(4);
  };
  const draw = p => {
    if (img == undefined) {
      img = p.loadImage(image);
    }
    img.resize(p.width, p.height);
    p.background(bgColor);
    tileWidth = p.width / tiles;
    for (let y = 0; y < tiles; y++) {
      for (let x = 0; x < tiles; x++) {
        let c = img.get(x * tileWidth, y * tileWidth);
        let b = p.brightness(c);
        //lineRaster(x, y, b);
        borderRadiusRaster(p, x, y, b);
      }
    }
  };

这个项目是在一段时间前开始的，所以有些东西可能已经过时了。我正在使用以下加载器处理node v16.13.0和webpack：

module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
    ],
  },

我猜解决方案就在我的webpack配置中，但我不确定从哪里开始寻找。
如果有人能帮我解决这个问题，我会很高兴的，thx：）