你可能需要一个合适的加载器来处理这种文件类型上传图片文件 [英] You may need an appropriate loader to handle this file type upload image file

问题描述

我在 react-babel-webpack 中使用图像文件.但它显示了一个错误

./public/assets/scissors.png 中的错误模块解析失败:/home/rohit/Desktop/game/public/assets/scissors.png意外字符 ' ' (1:0)您可能需要一个合适的加载器来处理这种文件类型.语法错误:意外字符 ' ' (1:0)

tool.component.js

从'react'导入React；从'../../public/assets/paper.png'导入纸张；从'../../public/assets/rock.png'导入摇滚；类工具扩展了 React.Component {使成为(){返回 (<div><img src={Paper} name="Paper" onClick={this.select.bind(this)} className="game-icon" alt="logo"/><img src={Rock} name="Rock" onClick={this.select.bind(this)} className="game-icon" alt="logo"/>

);}};导出默认工具；

webpack.config.dev.js

从路径"导入路径从 'webpack' 导入 webpack；导出默认{开发工具:'廉价模块评估源地图'，入口: ['webpack-hot-middleware/client',path.join(__dirname, '/client/index.js')],输出: {小路: '/'，公共路径:'/'},插件: [新的 webpack.NoErrorsPlugin(),新的 webpack.optimize.OccurenceOrderPlugin(),新的 webpack.HotModuleReplacementPlugin()],模块: {装载机: [{测试:/.js$/,包括: path.join(__dirname, 'client'),装载机:['反应热'，'通天塔']},{ test:/.css$/, loader: "style-loader!css-loader" },{ 测试:/.(jpe?g|png|gif|svg)$/i,加载程序:['file?hash=sha512&digest=hex&name=[hash].[ext]','image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false']}]},解决: {扩展名:[''，'.js'，'.css']}}

解决方案

将 '.png' 添加到扩展数组中:

解析:{扩展名:[ '', '.js', '.css', '.png' ]}

解决错别字

I am using an image file in react-babel-webpack. But it showing an error that

ERROR in ./public/assets/scissors.png
Module parse failed: /home/rohit/Desktop/game/public/assets/scissors.png
Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '�' (1:0)

tool.component.js

import React from 'react';
import Paper from '../../public/assets/paper.png';
import Rock from '../../public/assets/rock.png';

class Tools extends React.Component {
  render(){
    return (
      <div>
      <img src={Paper} name="Paper" onClick={this.select.bind(this)} className="game-icon" alt="logo" />
      <img src={Rock} name="Rock" onClick={this.select.bind(this)} className="game-icon" alt="logo" />
      </div>
    );
  }
};

export default Tools;

webpack.config.dev.js

import path from 'path'
import webpack from 'webpack';

export default {
  devtool: 'cheap-module-eval-source-map',
  entry: [
    'webpack-hot-middleware/client',
    path.join(__dirname, '/client/index.js')
  ],
  output: {
    path: '/',
    publicPath: '/'
  },
  plugins: [
    new webpack.NoErrorsPlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ],
  module: {
    loaders: [
      {
        test: /.js$/,
        include: path.join(__dirname, 'client'),
        loaders: [ 'react-hot', 'babel' ]
      },
      { test: /.css$/, loader: "style-loader!css-loader" },
      { test: /.(jpe?g|png|gif|svg)$/i,
        loaders: [ 'file?hash=sha512&digest=hex&name=[hash].[ext]',
          'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
        ]} 
    ]
  },
  resolve: {
    extentions: [ '', '.js', '.css' ]
  }
}

解决方案

add '.png' into the extensions array:

resolve: {
  extensions: [ '', '.js', '.css', '.png' ]
}

edit: resolved typo

这篇关于你可能需要一个合适的加载器来处理这种文件类型上传图片文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！