이미지 렌더링

public에 들어가있는 이미지의 경우 (경로 : public/images/b.jpg)

public은 public없이 경로 적으면 됨.

1. </img>
   

   src 경로를 보면 public없이 /images로 시작하고 있다
   

2. globals.css 파일에 클래스 선언하고, background: url로 값 넣고, 해당 클래스를 className에 할당해도 된다.
   

.bg-b {
  background: url(/images/b.jpg);
  width: 100%;
  height: 200px;
  max-height: 200px;
}

export default function App() {
  return (
    <>
      <div className="bg-b"></div>
    </>
  );
}

1. 인라인으로 style 속성으로 적용할 수 있다. style =
   

주의 style 값은 이중 괄호로 적어줘야 됨. (리액트 문법)

<div style={{ width: "100%", height: "200px", background: `url('/images/b.jpg')` }}></div>

1. tailwind 키워드 bg-[url(’경로’)]을 사용할 수 있다.
   

<div className="w-full h-[200px] bg-[url('/images/b.jpg')]"></div>

1. tailwind와 css 함께
   

<div className={`w-full h-[200px]`} style={{ background: `url('/images/b.jpg')` }}></div>

src 폴더에 들어가있는 이미지의 경우 (경로 : src/assets/images/a.jpg)

1. import로 경로 찾고 그 경로를 사용
   

import a from "./assets/images/a.jpg";

export default function App() {
  return (
    <>
      <img src={a} alt="a.jpg"></img>
    </>
  );
}

1. globals.css 파일에 클래스 선언하고, background: url로 값 넣고, 해당 클래스를 className에 할당해도 된다. (public과 동일)

.bg-a {
  background: url(../assets/images/a.jpg);
  width: 100%;
  height: 200px;
  max-height: 200px;
}

export default function App() {
  return (
    <>
      <div className="bg-a"></div>
    </>
  );
}

1. 인라인으로 style 속성으로 적용할 수 있다. style = {{ background: url(${변수명}) }}
   

주의 style 값은 이중 괄호로 적어줘야 됨. (리액트 문법)

import a from "./assets/images/a.jpg";

...
<div style={{ width: "100%", height: "200px", background: `url(${a})` }}></div>
...