Ich habe ein React-Projekt, das Webpack mit einigen Datei-Lader-Regeln verwendet. Ich hatte versucht, ein Bild in meiner React Komponente (JSX) wie folgt zu importieren/benötigen:Webpack-Datei-Loader funktioniert nur auf Windows, aber nicht auf dem Mac
<img src={require('../../assets/images/msg.png')} />
in einem macOS Computer und wirft es diesen Fehler:
ERROR in ./src/components/Header/index.js
Module not found: Error: Can't resolve '../../assets/images/search.jpg' in '/Users/leonimurilo/Personal projects/4Petson/src/components/Header'
@ ./src/components/Header/index.js 165:56-97
@ ./src/components/App/index.js
@ ./src/routes.js
@ ./src/index.js
@ multi ./src/webpack-public-path webpack-hot-middleware/client?reload=true ./src/index.js
überraschend, als ich versuchte, das laufen Projekt in einem Windows 7 Computer, es hat perfekt funktioniert!
ist hier mein webpack Modulobjekt:
module: {
rules: [
{test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel-loader']},
{test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file-loader'},
{test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff'},
{test: /\.[ot]tf(\?v=\d+.\d+.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/octet-stream'},
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml'},
{test: /\.(jpe?g|png|gif)$/i, loader: 'file-loader?name=[name].[ext]'},
{test: /\.ico$/, loader: 'file-loader?name=[name].[ext]'},
{test: /(\.css|\.scss|\.sass)$/, loaders: ['style-loader', 'css-loader?sourceMap', 'postcss-loader', 'sass-loader?sourceMap']}
]
}
Kann mir diese Lösung jemand helfen?
Mögliches Duplikat (https://stackoverflow.com/questions/37671342/how-to-load-image-files-with-webpack-file-loader) – Aaqib
[How-Bilddateien mit webpack Datei-Loader laden] Was ich nicht verstehe ist, warum es unter Windows funktioniert, aber nicht unter Mac –