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-index
css 배경 이미지를 "가짜"로 만듭니다.
단, 이 방법에는 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
'programing' 카테고리의 다른 글
작업 스케줄러 태스크가 오류 2147942667로 실패하는 이유는 무엇입니까? (0) | 2023.04.09 |
---|---|
엑셀 1시간 추가 (0) | 2023.04.09 |
리액트 시 setState 함수의 TypeScript 유형을 정의하려면 어떻게 해야 합니까?디스패치>가 접수되지 않았습니까? (0) | 2023.04.04 |
웹스톰: "디렉토리를 확인할 수 없습니다" (0) | 2023.04.04 |
ReactJ는 공백이 없는 문자열을 렌더링합니다. (0) | 2023.04.04 |