Webpack CSS 배경 이미지가 표시되지 않습니다.

webpack을 사용할 때 CSS 배경 이미지를 표시하는 데 문제가 있습니다.Webpack CSS 배경 이미지가 표시되지 않습니다.

I가 다음과 같은 CSS 클래스 :

.fb { 
    display: block; 
    width:30px; 
    height: 30px; 
    background-color: red; 
    background-image: url('../images/icons/facebook.png'); 
}

사용 (그래서 클래스 이름없는 클래스 반작용 사용) :

아래 <div className="fb"></div>

내 'web_build'폴더의 이미지입니다 웹팩 번들 내 모든 파일을. 강조 표시된 것이 범인 이미지입니다. 다음

는

내가 크롬 개발 도구의 네트워크 탭에서 볼 수있는 번들 SCSS 파일입니다. 'Img'탭에 이미지 파일이 표시되지 않습니다.

.fb { 
    display: block; 
    width: 30px; 
    height: 30px; 
    background-color: red; 
    background-image: url(1b725f86d1e04faadfad0cda2ac6ee89.png); 
}

렌더링 된 것으로 보이는 모든 것은 30x30px 붉은 색 사각형입니다.

NOTES :

I가 직접 <img> 태그, 영상 프로그램을 이용하여 화상을 참조하는 경우.
나는 다음과 같은 구성으로 이미지 웹팩 로더를 사용하고 웹팩-DEV-서버
을 사용하고 기타 정보가 필요한 경우

{ 
    test: /\.(jpe?g|png|gif|svg|ttf|eot|svg|woff(2)?)$/i, 
    loaders: [ 
     'file?hash=sha512&digest=hex&name=[hash].[ext]', 
     'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false' 
    ] 
    },

은 알려주세요 .

감사합니다.

출처

2016-07-09 SkelDave

CSS를 사용하여 내 CSS/SASS 번들링에서 sourceMap을 포함하면 CSS의 상대 이미지 URL이 손상된다는 것을 발견했습니다.

해결책 : 원본 맵을 끄거나 정규화 된 publicPath URL을 지정하십시오.

다음은 저에게 효과적입니다.

publicPath: 'http://localhost:8080'

더 많은 정보를 여기 https://github.com/webpack/style-loader/issues/55

출처

2016-07-11 09:13:51 SkelDave

image-webpack-loader는 이미지를 사용하여 이미지를 압축합니다. url-loader 또는 file-loader을 사용하여 파일을 css에로드하십시오.

출처

2016-07-10 18:28:50

Webpack CSS 배경 이미지가 표시되지 않습니다.

답변

관련 문제