我有这段代码不会渲染图像。
import styled from 'styled-components';
import ImageDiv from '../../shared/Image-div';
import { sideimage, signin } from '../../../assets/images';
import device from '../../../config/device';
const LogoDiv = styled(ImageDiv)`
background-image: url(${signin});
@media ${device.mobileS} {
background-image: url(${sideimage});
}
`;
export default LogoDiv;
渲染代码:
import React from 'react';
import { sideimage } from '../../../assets/images';
import SignUpButton from './sign-up-button';
import Input from '../../shared/Input-field';
import LogoDiv from '../../shared/Image-div';
import FormDiv from '../../shared/Sign-in-div';
import { NunitoItalic18, Nunito20 } from '../../shared/nunito/nunito';
import ImageContainer from '../../shared/image-container';
import ScreenDiv from '../../shared/screen-div';
type Props = {
setDisplayScreen: Function,
};
const marginInputPercentage = '4.3%';
const marginTopPercentage = '12.3%';
const buttonMarginPercentage = '6.7%';
const SignIn = ({ setDisplayScreen }: Props) => (
<ScreenDiv>
<ImageContainer>
<LogoDiv />
</ImageContainer>
);
export default SignIn;
这是用于分配的代码库。
assets/images
的代码
import logo from './qiisologo/qiiso.png';
import signup from './signup/signup.png';
import signin from './signin/signin.jpg';
import sideimage from './signin/sideimage.jpg';
export { logo, signup, signin, sideimage };
我使用了错误的语法,因为图像无法渲染吗?谢谢。