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

Question

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

我有一个 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>
  );
};

console.log 能够 return assets/image/homepageinfo 的值。hero_portrait 但是它在实际图像组件中仍然显示为空白。

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

Answer 1

您需要 require() 返回的结果 default。

当 import 声明 is used 而不是 require()

时，这通常会为您处理

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

已更新 如果找不到文件，require() 可能会失败。

所以我建议使用 import 作为文档 suggests 像这样：

homepageinfo.ts:

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

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

这样所有图像都将在构建期间解析为路径并且 homepageinfo.hero_portrait 将包含生成的 URL

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

Issue trying to load image from json path in CRA app

frontend

json

image

reactjs

create-react-app