如何解决使用 require 在 Angular 11 应用程序中加载图像
我试图通过将 <img src="../xxx/yyy" 添加到 Html 中以传统方式在 Angular 11 应用程序中加载一些图像，但它返回了 404 错误。 （我确定路径没问题）。之后，我尝试了 require 解决方案，但它再次失败。
这是我使用 require 的方式。
任何想法 - 解决方案？
打字稿
declare var require: any;
imgname= require("../../assets/images/Component95_1.png").default;
HTML
<img src={{imgname}}>
解决方法
您需要在 export interface DeliveryInfoProps {
heading: string;
body: string;
bodyHeading: string;
icon: ReactNode;
bottomTextProps: {
title: string;
href?: string;
};
}
const DeliveryInfo = ({ heading,body,bodyHeading,icon,bottomTextProps }: DeliveryInfoProps) => {
const classes = useStyles();
const { title,href } = bottomTextProps;
const bottomContent = useMemo(() => {
if (href) {
return (
<Text type="body" color="secondary" removeGutter href={href} component={NextComposed}>
{title}
</Text>
);
}
return (
<Text type="body" color="secondary" removeGutter>
{title}
</Text>
);
},[href,title]);
中创建一个 assets 目录。使用完整路径，您可以获得图像。 example
我建议通过输入指令设置 src：src
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
