reactjs - 为什么图像不显示在 React Typescript 和 Styled Component 上

Question

我正在尝试在使用打字稿模板创建的反应项目中显示图像。

代码运行，页面仅显示图像图标，而不显示图像本身。我究竟做错了什么？

我用过：create-react app --template typescript。如果我将它放在公共目录中，我将无法访问它。所以文件夹放在src目录下。

这是组件的外观：

import React from 'react';
import styled from 'styled-components';

const logo = require('../../src/images/logo.png');

const StyledTable = styled.div``;

export const MyPage: React.FC = () => {
  return (
    <StyledTable>
      <img alt="Profile Image" style={{ width: 100 }} src={String(logo)} />
    </StyledTable>
  );
};

export default MyPage;

这是它的样子：

标签： reactjsreact-typescript

Answer 1

你在使用 Create-React-App 吗？如果是这样，有一种更简单的方法来导入图像

从文档复制

import React from 'react';
import logo from './logo.png'; // Just import it

console.log(logo); // /logo.84287d09.png

function Header() {
  // Import result is the URL of your image
  return <img src={logo} alt="Logo" />;
}

export default Header;