Webpack एससीएसएस छवि URL लिंक नेस्टेड मार्गों

Question

यहाँ पर टूटी मेरी निर्देशिका संरचना है

/* nav.scss */ 

#nav-logo { 
    height: 26px; 
    width: 26px; 
    background-size: 100%; 
    background-image: url('../images/logo-b-green.png'); 
    float: left; 
    margin: 16px 0 0 23px; 
} 

जब एकल स्तर मार्गों मेरी छवि लोड हो रहा है लिंक सही ढंग से काम करते हैं।

उदाहरण के लिए /search पर छवि लिंक url(images/img-75fa3d.png) के रूप में प्रस्तुत किया गया है और काम करता है।

हालांकि, अगर मैं एक नेस्टेड मार्ग (रिएक्ट राउटर के माध्यम से) पर जाता हूं, उदा। /properties/1 छवि लिंक वही है और सही छवि स्थान नहीं मिल रहा है क्योंकि यह एक सापेक्ष लिंक है: url(images/img-75fa3d.png)।

इस उदाहरण की छवि logo-b-green.png है।

संपादित करें:

मैं output अनुभाग के लिए publicPath जोड़ा गया है और यह काम किया, अब यूआरएल जड़ जाना। क्या कोई पुष्टि कर सकता है कि इसे संभालने का यह सही तरीका है?

output: { 
path: './public', 
filename: 'bundle.js', 
publicPath: '/' 
}, ... 

Answer 1

मैं output अनुभाग के लिए publicPath जोड़ा गया है और यह काम किया, अब यूआरएल जड़ जाना।

output: { 
path: './public', 
filename: 'bundle.js', 
publicPath: '/' 
}, ...