图片无法渲染

时间:2019-12-10 17:25:07

标签: css reactjs

我有这段代码不会渲染图像。

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 };

我使用了错误的语法,因为图像无法渲染吗?谢谢。

0 个答案:

没有答案