react imagenes imagen error cargar reactjs webpack webpack-style-loader

reactjs - imagenes - error al cargar imagen messenger



no se pueden cargar archivos png con el paquete web, carácter inesperado (3)

Intente reiniciar el paquete, arréglenlo por mí.

Estoy intentando reconfigurar mi paquete web, y ahora no puedo cargar los archivos CSS. Guardo mis estilos en src> styles> main.css

Recibo errores como

ERROR in ./src/images/NavIcon03.png Module build failed: SyntaxError: /Users/myname/work/site/src/images/NavIcon03.png: Unexpected character ''�'' (1:0)

Aquí está mi configuración de webpack

var webpack = require(''webpack'') module.exports = { entry: [ ''./src/main.js'' ], output: { path: __dirname, publicPath: ''/'', filename: ''bundle.js'' }, module: { loaders: [{ exclude: /node_modules/, loader: ''babel'' }, { test: //.css$/, // Only .css files loader: ''style!css'' // Run both loaders }] }, resolve: { extensions: ['''', ''.js'', ''.jsx''] }, devServer: { contentBase: ''./'' } };

A continuación se muestra el paquete. Json

{ "name": "website", "version": "0.0.1", "dependencies": { "ampersand-app": "^1.0.4", "ampersand-model": "^5.0.3", "ampersand-react-mixin": "^0.1.3", "ampersand-rest-collection": "^4.0.0", "ampersand-router": "^3.0.2", "asynquence": "^0.8.2", "autoprefixer": "^5.2.0", "autoprefixer-core": "^5.2.0", "autoprefixer-stylus": "^0.7.0", "axios": "^0.9.1", "babel": "^5.5.8", "babel-core": "^5.5.8", "babel-loader": "^5.1.4", "bootstrap": "^3.3.6", "bootstrap-webpack": "0.0.5", "css-loader": "^0.15.1", "d3": "^3.5.12", "file-loader": "^0.8.4", "font-awesome": "^4.5.0", "google-map-react": "^0.9.3", "history": "^1.17.0", "hjs-webpack": "^2.6.0", "json-loader": "^0.5.2", "local-links": "^1.4.0", "lodash": "^4.3.0", "lodash.assign": "^3.2.0", "lodash.has": "^3.2.1", "lodash.merge": "^3.3.1", "lodash.pick": "^3.1.0", "lodash.result": "^3.1.2", "milliseconds": "^1.0.3", "moment": "^2.11.1", "node-libs-browser": "^0.5.2", "object-assign": "^4.0.1", "octicons": "^2.2.0", "postcss-loader": "^0.5.0", "qs": "^3.1.0", "react": "^0.14.6", "react-avatar-editor": "^3.2.0", "react-bootstrap": "*", "react-bootstrap-table": "^1.3.3", "react-bootstrap-validation": "^0.1.11", "react-cropper": "^0.6.0", "react-d3-components": "^0.6.0", "react-dom": "^0.14.6", "react-dropzone": "^3.3.0", "react-dropzone-component": "^0.8.1", "react-facebook-login": "^2.0.3", "react-fileupload": "^1.1.3", "react-google-maps": "^4.7.1", "react-hot-loader": "^1.3.0", "react-input-slider": "^1.5.0", "react-redux": "^4.4.0", "react-router": "^2.0.0", "react-select": "^1.0.0-beta8", "react-star-rating-component": "^0.1.0", "redux": "^3.3.1", "redux-promise": "^0.5.1", "slugger": "^1.0.0", "standard": "^4.3.1", "style-loader": "^0.12.3", "stylus-loader": "^1.2.1", "surge": "^0.14.2", "url-loader": "^0.5.6", "webpack": "^1.9.11", "webpack-dev-server": "^1.9.0", "xhr": "^2.0.2", "yeticss": "^6.0.7" }, "license": "", "private": true, "scripts": { "build": "webpack", "deploy": "surge -p public -d labelr.surge.sh", "start": "webpack-dev-server", "yolo": "git add --all && git commit -am /"$(date)/" && npm version minor && git push origin master --tags && npm run build && npm run deploy" }, "devDependencies": { "babel-preset-react": "^6.5.0", "css-loader": "^0.15.6", "redux-devtools": "^3.1.1", "style-loader": "^0.12.4" } }


Puede usar image-webpack-loader con file loader https://www.davidmeents.com/blog/how-to-set-up-webpack-image-loader/

1) instalarlos

$npm install image-webpack-loader file-loader --save-dev

2) agregue a webpack.config.js debajo de babel-loader su nuevo conjunto: image-webpack-loaders and file-loader

module: { loaders: [ { test: //.jsx?$/, exclude: /(node_modules|bower_components)/, loader: ''babel-loader'', query: { presets: [''react'', ''es2015'', ''stage-0''], plugins: [''react-html-attrs'', ''transform-class-properties'', ''transform-decorators-legacy''], } }, { test: //.(jpe?g|png|gif|svg)$/i, loaders: [ ''file?hash=sha512&digest=hex&name=[hash].[ext]'', ''image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'' ] } ] },

3) Importe su archivo .jpg a variable (para mí es la variable ''imgabout'') y agregue esta variable a src

import React from ''react''; import imgabout from ''./img-about.jpg''; export default class Article extends React.Component { render() { const { title } = this.props; return ( <div class="col-md-6"> <img class="img-about" src={imgabout} alt="Logo" /> </div> );}}


Te falta un cargador adecuado que coincida con tu Png. Para solucionar esto, configure el cargador de url o el cargador de archivos para que coincida con su png.

url-loader tiene una opción de límite que puede serle útil. Le permite controlar si emite dataurls (en línea) o rutas (usa file-loader y emite archivos que coinciden con las rutas).