尝试从 CRA 应用中的 json 路径加载图像时出现问题
Issue trying to load image from json path in CRA app
我无法在我的 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 文件夹中。
您需要 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 应用程序中加载来自 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 文件夹中。
您需要 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