1

我希望我能把所有的图像都放到“Image.jsx”文件中，并轻松地将它们从 React 中的另一个文件中取出

例如

export const Header = ({ title, children }) => {
  return (
    <>
      <Title>{title}</Title>
      <Items>{children}</Items>
    </>
  );
};
Header.propTypes = {
  title: PropTypes.node,
  children: PropTypes.object,
}; 
// I made a separate component. And the codes in the component will be used in other files.

import { Header } from "../BaseLabel";
const FriendstHeader = () => {
  return (
    <>
      <FriendContainer>
        <Header title="친구" style={{ color: "#191919" }}/>
      </FriendContainer>
    </>
  );
};
export default FriendstHeader;

我想管理图像。像这个例子。这是 Image.jsx

import React from 'react';
import PropTypes from 'prop-types';
import Search from "images/search.png";

const imageSrc = [ Search ];
export const Image = (props: imageSrc) => {
  return (
   <>
     <img alt="">{imageSrc.Search}</img>
   </>
  );
};
Image.propTypes = {
  imageSrc: PropTypes.node,
};

这是将显示图像的主屏幕。

import React from 'react';
import Search from "images/search.png";

const Header = () => {
  return(
    <>
     <Items>
       <img src={Search} width="18px" height="18px" alt="" />
     </Items>
    </>
  )
}
export default Header;

图片其实不是一张，只是为了不显得复杂，就简化为上面一张。

4

1 回答 1

1

实际上在代码中捆绑图像是个坏主意。您应该将图像或静态文件移动到publicor public/images（这会更有意义）。

那你Image.jsx就可以这样了。

import React from 'react';

const Image = ({src, alt="", ...rest }) => {
    return <img src={src} alt={alt} {...rest}/>
}

export default Image;

之后，您可以Image像这样使用您的组件：

import React from 'react';

const Test = () => {
   return 
<div>
   <p>Hello world</p>       
   <Image src="/images/Search.png" width="20" height="20" style={{ marginBottom: 10 }} onClick={() => {}} alt="This is alt for search image"/>
</div>
}

export default Test;
于 2020-12-09T07:02:45.840 回答