reactjs에서 배경 이미지를 설정하는 방법

reactjs에서 배경 이미지를 설정하는 방법

reactjs/webpack 앱을 가지고 있으며, 이 앱의 배경 이미지를 설정하려고 합니다.body태그:

body{
    background: url("../images/some-background.jpg");
    background-size:contain;
    background-position:top;
    background: cover;
}

단, 컴포넌트를 로드한 후body페이지에 스타일이 없습니다.콘솔에 표시됩니다.웹 팩에 의해 로드된 CSS 파일에 CSS 규칙이 있는 동안 메인 페이지에 배경 이미지를 표시하는 방법이 있습니까?Reactjs가 제가 모르는 일을 해서 그런 건가요?

이미지를 저장해야 합니다.public폴더(folder of the folder of your folder.를 참조해 주세요.public슬래시를 사용하는 폴더/거기서 이미지에 액세스 할 수 있습니다.

예를 들어 다음과 같습니다.

<img src="/background.jpg" />

CSS 파일에서도 같은 작업을 수행할 수 있습니다.

.background {
   background-image: url("/background.jpg");
}

배경은 이미 문자열이어야 합니다.

backgroundImage: "url(" + Background + ")"

ES6 문자열 템플릿도 사용할 수 있습니다.

backgroundImage: `url(${Background})`

이걸 읽어보세요 도움이 될 거예요

https://www.davidmeents.com/blog/how-to-set-up-webpack-image-loader/

이미지를 프로젝트의 src 폴더에 저장해야 합니다.src 폴더에도 있어야 하는 css 파일 내의 이미지를 참조할 수 있습니다.

예를 들어 "src/images/background.jpg" 디렉토리의 이미지입니다.

그런 다음 다음과 같은 방법으로 css 파일("src" 폴더에 있는)에 있는 파일을 참조할 수 있습니다.

.background {
   background-image: url("./images/background.jpg");
}

본문 태그에 배경 이미지를 넣기 위해 작성한 심플한 github 저장소입니다.이 예에서는 css 전용 웹 팩 설정에 추가된 변경/플러그인은 없습니다.

당신의 코드에서 당신이 나와 유사한 저장소 구조를 가지고 있다면 그것은 경로의 문제일 수 있습니다.이것으로 궁금증이 해결되길 바랍니다.

순수 ReactJ 및 인라인 CSS

직접적 접근 방식을 찾고 있는 경우local그 경우 파일링해당장.해라

import Image from "../../assets/image.png"

<div
style={{ background-image: 'url(' + Image + ')', background-size: 'auto' }}
>Background Image
</div>

의 경우입니다.ReactJS인라인 스타일링으로Image는 경로와 함께 Import해야 하는 로컬파일입니다

웹 팩이 배경 이미지를 올바르게 로드하는 데 지속적으로 문제가 있었습니다.아마 웹팩2는 고쳐졌을지도 모르지만, 저는 아직 사용하지 않고 있습니다.이제 다시 사용하기로 했습니다.copy-webpack-plugin이미지를 디렉토리에 카피하고 나서, CSS 로케이션을 참조합니다.

new CopyWebpackPlugin([
        { from: './src/images', to: 'images' }
])

CSS:

.Logo {   background-image: url(./logo.png); }

반응:

import React from 'react';
import logo from './logo.png';  // Tell Webpack this JS file uses this image
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;

이미지 파일을 공용 폴더에 넣어야 합니다.

background: url(./logo.jpg) no-repeat;

폴더 구조는 다음과 같습니다.

public -- 로고.jpg

쓸수css or scss files은 Import를 sass-loader or css-loadercss를 사용하다

따라서 즉시 동작하지 않습니다.브라우저는 먼저 bundle.js를 로드하고 exec js 파일을 생성하여 헤더에 삽입합니다.

즉시 작업하려면 html 파일에 스타일시트를 작성해야 합니다.

또한 배경 이미지를 로드하는 데도 시간이 걸립니다.

시행착오를 통해 이 사실을 발견했습니다.키는 태그의 높이와 너비 속성 태그를 참조하여 자동으로 치수를 조정하는 것입니다.

반응

import React from "react";
import backgroundFinalStyle from "../../style/styled-css/background-style";
import i from "../../assets/media/calendar.jpg";

const StillBackground = (props) => {
  const FullscreenVideoWrap = backgroundFinalStyle.fullscreenVideoWrap;
  const ImgFull = backgroundFinalStyle.imageFull;

  return (
    <FullscreenVideoWrap>
      <ImgFull>
        <img height="100%" width="100%" src={i}></img>
      </ImgFull>
    </FullscreenVideoWrap>
  );
};

export default StillBackground;

background-styles.view

import styled from "styled-components";

const FullscreenVideoWrap = styled.div`
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  min-width: 100%;
  min-height: 100%;
`;


const ImgFull = styled.div`
  position: absolute;
  z-index: -100;
`;

const backgroundFinalStyle = {
  fullscreenVideoWrap: { ...FullscreenVideoWrap },
  imageFull: { ...ImgFull },
};

export default backgroundFinalStyle;

언급URL : https://stackoverflow.com/questions/44796786/how-to-set-a-background-image-in-reactjs