Question

我正在尝试使用React作为前端创建一个grails应用。虽然加载图像有问题。我尝试了一些东西，起初图像根本不会加载。我也尝试链接到互联网上的图片，它按预期工作。

现在我收到了这个错误：

Module parse failed: /Users/miggy/projects/brochure/src/main/js/process/example.png Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '�' (1:0)
    at Parser.pp$4.raise (/Users/miggy/projects/brochure/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp$7.getTokenFromCode (/Users/miggy/projects/brochure/node_modules/acorn/dist/acorn.js:2756:10)
    at Parser.pp$7.readToken (/Users/miggy/projects/brochure/node_modules/acorn/dist/acorn.js:2477:17)
    at Parser.pp$7.nextToken (/Users/miggy/projects/brochure/node_modules/acorn/dist/acorn.js:2468:15)
    at Parser.parse (/Users/miggy/projects/brochure/node_modules/acorn/dist/acorn.js:515:10)
    at Object.parse (/Users/miggy/projects/brochure/node_modules/acorn/dist/acorn.js:3098:39)
    at Parser.parse (/Users/miggy/projects/brochure/node_modules/webpack/lib/Parser.js:902:15)
    at NormalModule.<anonymous> (/Users/miggy/projects/brochure/node_modules/webpack/lib/NormalModule.js:104:16)
    at NormalModule.onModuleBuild (/Users/miggy/projects/brochure/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
    at nextLoader (/Users/miggy/projects/brochure/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
    at /Users/miggy/projects/brochure/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
    at Storage.finished (/Users/miggy/projects/brochure/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
    at /Users/miggy/projects/brochure/node_modules/graceful-fs/graceful-fs.js:78:16
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:416:3)
 @ ./src/main/js/process/process-page.js 13:15-39

这是我的webpack.config.js：

const path = require('path')
const webpack = require('webpack')

module.exports = {
  entry: {
    index: './src/main/js/index.js'
  },
  output: {
    path: './grails-app/assets/javascripts',
    publicPath: '/assets/',
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
    loaders: [
      {
        test: /\.js$/,
        include: path.join(__dirname, 'src/main/js'),
        loader: 'babel',
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  }
}

这是我的component.js：

import React, { Component } from 'react'
import ProcessImg from './example.'

class ProcessPage extends Component {
  render() {
    return (
      <div>
        <div>
          <img src={ ProcessImg } alt="boohoo" className="img-responsive"/>
        </div>
        Process
      </div>
    )
  }
}

export default ProcessPage;

Answer 1

由于您没有使用webpack file-loader，因此无效。您需要使用npm安装它，如下所示：

npm install --save-dev file-loader

此外，您需要修改webpack.config.js，以便webpack可以识别加载程序。这是一个例子：

（您还可以使用query向加载程序添加选项。请参阅webpack documentation for query parameters。

loaders: [
  // babel loader
  { test: /\.png$/, loader: 'file-loader' }
]

然后在您的component.js文件中，导入需要以扩展名结尾：

import ProcessImg from './example.png';

React + Grails图像加载

1 个答案: