CSS에서 이미지를 참조하는 방법은 무엇입니까? CSS에서 이미지를 참조하는 방법

CSS에서 이미지를 참조하는 방법은 무엇인가요? CSS에서 이미지를 참조하는 단계는 무엇입니까? 이 글은 CSS에서 이미지를 참조하는 방법을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

CSS에 그림 쓰기: CSS 참조 그림

css 참조 그림 1단계: src 디렉터리에 새 이미지 폴더를 만들고 그 안에 그림을 넣습니다.
# 🎜🎜#

Css 참조 이미지 2단계: index.html에 블록 삽입

예:

< /p>

css 참조 이미지 3단계: CSS 디렉터리의 index.css에 #pic에 대한 배경 이미지를 삽입합니다.

css 참조 이미지 4단계: 터미널에서 웹팩 패키징 오류를 입력합니다. 터미널에서 ffile-loader 및 url-loader를 구성해야 합니다

npm install –save-dev file-loader url-loader

성공적인 설치 #🎜 🎜#

터미널에 입력:

css 참조 이미지 5단계: webpack-config.js에서 ==url- in ==module== 구성 로더==( url-loader에는 file-loader가 포함되어 있으므로 file-loader를 구성할 필요가 없습니다.)

//模块：例如解读CSS,图片如何转换，压缩module:{
     rules: [
         {
           test: /\.css$/,           use: [ 'style-loader', 'css-loader' ]
         },{
            test:/\.(png|jpg|gif)/ ,            use:[{
                loader:'url-loader',
                options:{
                    limit:500000
                }
            }]
         }
       ]
 },

test:/.(png|jpg|gif)/는 일치하는 이미지 파일의 접미사 이름입니다.

use: 사용되는 로더와 로더를 지정하는 구성 매개변수입니다.

limit: 500000B보다 작은 파일은 Base64 형식으로 포맷되고 JS로 작성됩니다.

css 참조 이미지 6단계: 터미널에 ==webpack==을 입력하여 패키지

css 참조 이미지 7단계: 브라우저 미리보기를 위한 npm 실행 서버#🎜🎜 ## 🎜🎜#참고:

[x] url-loader는 파일 로더를 캡슐화합니다. url-loader는 file-loader에 의존하지 않습니다. url-loader를 사용하더라도 url-loader는 내장되어 있으므로 file-loader를 설치할 필요가 없습니다.

• url-loader 작업은 두 가지 상황으로 나뉩니다.

• 
  

  파일 크기가 제한 매개변수보다 작으면 url-loader는 파일을 DataURL(Base64 형식)로 변환합니다.

• 파일 크기가 제한보다 큽니다. -loader는 file-loader를 호출합니다. 처리를 위해 매개변수도 file-loader에 직접 전달됩니다. (실제로는 url-loader 하나만 설치하면 됩니다. 하지만 향후 작업의 편의를 위해 여기에 file-loader를 설치하겠습니다.)

• Configure url - 위 로더는 굳이 소개할 필요가 없습니다. 플러그인을 소개하고 싶을 때는 webpack-config.js 위에만 소개하면 됩니다. 🎜🎜#

  CSS 참조 이후에 리소스 파일을 찾을 수 없는 경우가 있습니다. 이미지가 포장되어 있습니다.

위 내용은 CSS에서 이미지를 참조하는 방법은 무엇입니까? CSS에서 이미지를 참조하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!