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).