尝试从CRA应用程序中的json路径加载图像时出现问题

我无法从CRA应用程序中的

src/assets/image

加载图像。我试图避免将这些图像放在我的公用文件夹中，但出于某种原因，这似乎是它们显示的唯一方式

我有一个带有路径的json文件

homepageinfo.ts

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

一个util函数文件

dataClient

，用于使用函数getHomePageInfo导入json文件

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>
  );
};

从“React”导入React；
从“语义ui”导入{Grid，Header，Image，Segment}；
从“utils/dataClient”导入{getHomePageInfo}；
导出常量HomeTitle=（）=>{
让homepageinfo=getHomePageInfo（）；
返回(
...
{console.log（require（“assets/image/”+homepageinfo.hero_-grait））}
);
};

console.log能够返回assets/image/homepageinfo.hero\u的值，但是在实际图像组件中它仍然显示为空

---

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

您需要从

require（）

返回的结果中选择

默认值

这通常在
import
语句而不是
require（）

这样，所有图像将在构建期间解析为路径，并且
homepageinfo.hero\u-grait
将包含生成的URL
谢谢，添加默认作品。在这种特殊情况下可能没有多大意义，但我想弄清楚如何从json文件路径加载它，因为我有其他组件必须从路径数组加载，我遇到了与这些相同的问题。在这种情况下，我不认为导入每一条路径都是非常友好的。
import React from "react";
import { Grid, Header, Image, Segment } from "semantic-ui-react";
import { getHomePageInfo } from "utils/dataClient";

export const HomeTitle = () => {
  let homepageinfo = getHomePageInfo();
  let imageUrl;
  try {
    const res = require("assets/image/" + homepageinfo.hero_portrait);
    console.log(res);
    imageUrl = res.default;
  } catch () {
    imageUrl = ''; // file not found
  }

  return (
    <Grid columns={2}>
      ...
      <Grid.Column
        only="tablet computer"
        verticalAlign="bottom"
        textAlign="right"
      >
        <Image as="img"
          className="img_portrait"
          spaced={"left"}
          src={imageUrl}
        />
      </Grid.Column>
    </Grid>
  );
};

import testImg from './assets/image/testimg.jpg';

export const homepageinfo: homepageinfoType = {
  ...
  hero_portrait: testImg,
};