Webpack 2 Hintergrundbild relativer Pfad arbeitet

Question

nicht

Wenn ich ein Bild angeben, in meinem reagieren Komponente einen relativen Pfad es gerade fein

Komponente lädt:

import myImg from '../img/myImg.jpg'; 
... 
<img className="myImg" src={myImg} alt="amazing image" /> 

Dies funktioniert gut. Und bei der Inspektion es dem Pfad als http://localhost:8080/src/img/myImg.jpg

Allerdings gibt, wenn ich versuche, das Bild als Hintergrundbild zu verwenden, der Weg falsch ist, und ich bekomme ein 404

CSS:

#mainContainer { 
    background-image: url('../img/myImg.jpg'); 
    background-size: cover; 
    background-position: center; 
} 

Dies führt zu Der Pfad ist http://localhost:8080/css/src/img/myImg.jpg was falsch ist. Wenn ich eine absolute URL verwenden, funktioniert es background-image: url('http://localhost:8080/src/img/challenge.jpg');

Webpack config:

... 
     { 
      test: /\.less$/, 
      include: [ 
       path.resolve(__dirname, 'src/less') 
      ], 
      use: ExtractTextPlugin.extract({ 
       fallback: 'style-loader', 
       use: [ 
        { 
         loader: 'css-loader', 
         options: { importLoaders: 1 } 
        }, 
        'less-loader' 
       ] 
      }) 
     }, 
     { 
      test: /\.(jpe?g|png|gif|svg)$/i, 
      include: [ 
       path.resolve(__dirname, 'src/img') 
      ], 
      use: 'file-loader?name=[path][name].[ext]' 
     } 
    ] 
}, 
plugins: [ // https://webpack.js.org/configuration/plugins/ 
    new ExtractTextPlugin('css/' + pkg.name + '.' + pkg.version + '.css'), 
    new HtmlWebpackPlugin({ template: path.join(__dirname, 'src/template.js')})//, 
] 
... 

Was getan werden kann, einen relativen Pfad in der CSS zu benutzen?

Answer 1

Sieht so aus, als ob Sie nur anoter '../' in Ihrem relativen Pfad für Ihre CSS benötigen.

#mainContainer { 
    background-image: url('../../img/challenge.jpg'); 
    background-size: cover; 
    background-position: center; 
}