我无法从src/assets/image我的CRA应用程序中加载图像。我想避免将这些图像放在我的公用文件夹中，但是由于某些原因，这似乎是显示它们的唯一方法。

我有一个homepageinfo.ts带有路径的json文件

export const homepageinfo: homepageinfoType = {
  ...
  hero_portrait: "testimg.jpg",
};

一个dataClient利用函数getHomePageInfo导入json文件的util函数文件。

export const getHomePageInfo = () => {
  return homepageinfo;
};

和另一个文件 HomeTitle.tsx

import React from "react";
import { Grid, Header, Image, Segment } from "semantic-ui-react";
import { getHomePageInfo } from "utils/dataClient";

export const HomeTitle = () => {
  let homepageinfo = getHomePageInfo();

  return (
    <Grid columns={2}>
      ...
      <Grid.Column
        only="tablet computer"
        verticalAlign="bottom"
        textAlign="right"
      >
        {console.log(require("assets/image/" + homepageinfo.hero_portrait))}
        <Image as="img"
          className="img_portrait"
          spaced={"left"}
          src={require("assets/image/" + homepageinfo.hero_portrait)}
        />
      </Grid.Column>
    </Grid>
  );
};

console.log能够返回asset / image / homepageinfo.hero_portrait的值，但是在实际的Image组件中它仍然显示为空白。

如果我将图像移动到公用文件夹，则可以显示该图像，但我不想将这些图像放在公用文件夹中。