programing

Next.js background-image css 속성이 이미지를 로드할 수 없습니다.

megabox 2023. 4. 4. 21:13
반응형

Next.js background-image css 속성이 이미지를 로드할 수 없습니다.

문제는 단순히 React 내의 인라인 backgroundImage 속성 내에서 사용하기 위해 정적 이미지에 액세스하려고 한다는 것입니다.

reactjs와 next.js를 사용하고 있는데 next.js를 사용하여 이미지를 추가하는 문제가 발생했지만 Next.js + Images라는 이미지 로더를 사용하여 이를 수정했습니다.

이제 일반 html img 태그로 이미지를 정상적으로 추가할 수 있게 되었습니다.

예:<img src={ img } />이건 효과가 있어요

css 배경 이미지를 다음과 같이 추가하려고 했습니다.

const team = (props) => {
const img = require("../../assets/images/security-team.jpg");
const styling = {
    backgroundImage: `url('${img}')`,
    width:"100%",
    height:"100%"
}
console.log(img);
return (
    <dev className="team" style={styling}>

    </dev>
);

}

console.log 결과를 다음에 나타냅니다.

/_next/static/security-team-449919af899ae47eaf307dca4dda8e1.jpg

이미지가 표시되지 않고 오류가 발생하지 않았습니다.그때 브라우저 website-url + console.log 결과를 입력하려고 했습니다.이미지가 표시되었습니다!

먼저 이미지 파일을 Import합니다.

import bg from '../../assets/images/security-team.jpg'

그런 다음 인라인 스타일을 적용합니다.

style={{
      backgroundImage: `url(${bg.src})`,
      width: '100%',
      height: '100%',
    }}

와 함께next@11.0공개 폴더에 이미지를 넣어 스타일 파일에서 다음을 사용했는데 작동했습니다.

background-image: url('/image.svg');

여기에 있는 모든 솔루션에서 NextJs 커스텀의 주요 이점을 누릴 수 있는 것은 아닙니다.<Image>기본적으로 최적화된 응답성 이미지를 제공하며 엄청난 이점을 제공합니다.할 수 있을 때는z-indexcss 배경 이미지를 "가짜"로 만듭니다.

단, 이 방법에는 CSS 배경과 같은 반복 가능한 옵션이 없다는 제한이 있습니다.

이 예에서는 테일윈드 CSS를 사용하고 있습니다.

<div className="h-screen">
    <div className="absolute -z-10">
        <Image
            src="/some.jpeg"
            layout="fill"
            objectFit="cover"
            quality={100}
        />
    </div>
    <div> Some overlay things go in here </div>
</div>

다음 이미지 패키지는 나에게 효과가 있다.

첫 번째:

yarn add next-images

그런 다음 next.config.js 파일에서 다음을 수행합니다.

const withImages = require('next-images')
module.exports = withImages()

다음 작업을 수행할 수 있습니다.

<div
  style={{
    backgroundImage: "url(" + `${require("./path-to-the-image")}` + ")",
    width: "100%",
    height:[HEIGHT OF THE IMAGE],
    backgroundRepeat: "no-repeat",
    backgroundSize: "cover"
  }}
>XXX</div>

next-display의 자세한 내용은http://https://github.com/twopluszero/next-images 를 참조해 주세요.

styles/home.scss의 css 파일

public/bg-img.png 이미지 파일

.content_bg {
    margin: 50px 0;
    background-image: url('../public/bg-img.png');
    height: 500px;
    background-size: cover;
    background-repeat: no-repeat;
}

~하듯이nextjs매뉴얼에 기재되어 있습니다.https://nextjs.org/docs/basic-features/static-file-serving) :

다음.js는 이미지처럼 정적 파일을 제공할 수 있습니다.public루트 디렉터리에서

내부 파일public그러면 기본 URL에서 코드를 참조할 수 있습니다./).

그래서 우리의 이미지를 참조하기 위한 올바른 방법은public폴더:

CSS의 예:

background-image: url('/your-image.jpg');

JSX의 예:

import Image from 'next/image'
<Image src="/your-image.jpg" alt="Image description" width="64" height="64" />

JSX 스타일을 사용하고 포지션 절대 속성을 추가했을 때는 잘 동작했습니다.

다음과 같이 합니다.

 <style JSX>{`
    .team {
        width:100%;
        height:100%;
        position:absolute;
        background: url('`+img+`') no-repeat;
    }
`}</style>

이미지를 '/static/images/' 폴더에 배치하는 경우 Import 없이 '/static/images/security-team.jpg'을 사용할 수도 있습니다.예를 들어 다음과 같습니다.

const styling = {
  backgroundImage: "url('/static/images/security-team.jpg')",
  width:"100%",
  height:"100%"
}
return (
  <div className="team" style={styling}></div>
);

다음과 같이 이미지를 공용 폴더에 넣고 액세스할 수 있습니다.

const team = (props) => {
const styling = {
    backgroundImage: `url('./security-team.jpg')`,
    width:"100%",
    height:"100%"
}
return (
    <dev className="team" style={styling}>

    </dev>
);

당신이 해야 할 일은 url을 변경하는 것이다.

부에서background-image: url('/public/images/my-img.jpg');

to 로.background-image: url('/static/images/my-img.jpg');

/static 디렉토리는 더 이상 사용되지 않습니다.NextJS가 스태틱디렉토리를 폐지한 이유에 대해 설명하고 있는 링크에 에러메시지가 표시됩니다.

public은 스태틱디렉토리의 사용 사례도 커버하고 있기 때문에, 같은 기능을 가지는 public/static 폴더를 작성하기 위해서 스태틱디렉토리를 폐지하기로 결정했습니다.

동적 이미지 사용

우선 이렇게 선언하다.

 let style = {
        backgroundImage: "url(" + props.image + ")",
    }

그리고나서

<div style={style}>
    <div className="content">content here</div>
</div>

Next.js v12.0.10을 사용하고 있는데 다음과 같이 시도해도 css 배경 이미지가 로드되지 않습니다.

<div style={{ backgroundImage: "url('/public/a.jpg')"}}>
</div>

, 지만 the the the the를 /public【URL】【URL 。

<div style={{ backgroundImage: "url: '/a.jpg')"}}>
</div>

Ivan이 위에서 말한 것처럼:

그 후, 퍼블릭 내부의 파일은, 베이스 URL(/)로부터 시작하는 코드로 참조할 수 있습니다.

<div className="VistaCodeLab" style={{backgroundImage: ` url('data:image/png;base64,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')`}}></div>

base64 이미지로 이렇게 사용

base64 https://www.base64-image.de/에 대한 이미지 온라인 변환 도구

이미지는 공개해야 합니다(후풍 포함).

<div className="my-5 lg:my-6">
 <img src="/logotipo/logo.png" alt="easybanklogo" />
</div>
 <div
  class="horizontal-layout horizontal-menu navbar-static dark-layout 1-column footer-static bg-full-screen-image  blank-page blank-page"
  data-open="hover"
  data-menu="horizontal-menu"
  data-col="1-column"
  data-layout="dark-layout"
  style={{ backgroundImage: "url(/assets/images/pages/auth-bg.jpg)" }}
>

저에게는 다음 URL이 작동합니다.

background-image: url("../../public/path/to/image.jpg")

은 두 개를 입니다... 전에/public(이미지가 퍼블릭폴더에 있는 것을 확인)

next.js는 루트 디렉토리의 public이라는 폴더 아래에 이미지 등의 정적 파일을 제공할 수 있습니다.그 후, 퍼블릭 내부의 파일은, 베이스 URL(/)로부터 시작하는 코드로 참조할 수 있습니다.

예를 들어 이미지를 public/me.png에 추가하면 다음 코드가 이미지에 액세스합니다.

background-image: url('/img/imge1.png');

다음 js에서 깨달은 것은 다음과 같습니다.

  • 및 인라인 BackgroundImage => "/image.png"에 대한 공용 폴더(공용 폴더 또는 해당 공용 폴더로의 경로 제외)의 경로를 포함하면 공용 폴더의 파일에 직접 액세스할 수 있습니다.

for 및 background-image(css 파일에서) => 코딩하는 파일에서 해당 이미지까지의 경로를 정의합니다(예: "../public/image.png").

다시 제가 작업하던 걸로 돌아가면...

  <section style={{ backgroundImage : "url('/4.jpg')" }}>
Example using Nextjs, node modules and scss.

    import styles from "../styles/Home.modules.scss"
    import Image from "next/image"
    export default function Home() {
      <div className={styles.background_image}> 
        <Image
          width={2746}  //use the width of the image being used
          height={4681} //use the height of the image being used
          layout="fill"
          alt="water_portrait"
          src="/home/water_portrait.jpg" //image saved in public/home
        />
      </div>
   }

  //styles/Home.module.scss
  .background_image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
  }
  .somethingElse{
      positsion: relative;
      z-index:10;
  }

이미지 오브젝트의 src 속성을 사용하여 이 문제를 회피할 수 있었습니다.

{ img.src }

문서에는 다음 방법으로 구현된 배경 이미지가 나와 있습니다.

import Image from 'next/image'
<Image />

라이브 데모 - https://image-component.nextjs.gallery/background

언급URL : https://stackoverflow.com/questions/51842419/next-js-background-image-css-property-cant-load-the-image

반응형