Question

我目前正在使用React和webpack进行项目，但是我对这两者都是新手。我需要显示服务器文件系统中的图像。我正在尝试使用webpack的文件加载器来显示图像，但无法使其正常工作。

编辑：由于提出了一些建议，我进行了一些更改，并且遇到了与原始问题略有不同的问题。从要求图片切换为导入图片后，我现在获得了正确的文件路径， “ images / 7047aa4de98575625fc771ca68618c28.png”。现在，我的webpack文件加载器输出到该目录，并且在文件系统上确实有一个名为images / 7047aa4de98575625fc771ca68618c28.png的图像，但是当我尝试显示该图像时，得到了404 NOT FOUND响应。

我的webpack配置在这里：

var path = require('path');

module.exports = {
    entry: './src/main/js/app.js',
    devtool: 'sourcemaps',
    cache: true,
    mode: 'development',
    output: {
        path: __dirname,
        filename: './src/main/resources/static/built/bundle.js'
    },
    module: {
        rules: [
            {
              test: /\.(jpg|png|svg)$/i,
              loader: 'file-loader',
              options: {
                outputPath: 'images',
              }
            },
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: [{
                    loader: 'babel-loader',
                    options: {
                        presets: ["@babel/preset-env", "@babel/preset-react"]
                    }
                }]
            }
        ]
    }
};

我的代码中试图获取图像的相关部分在这里：

// const catImage = require('./data/images/cat.png');
import catImage from './data/images/cat.png';

const root = '/api';

class App extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          <Switch>
            <Route path="/" component={Upload} exact />
            <Route path="/share/:key" component={Share} />
            <Route path="/test" component={Test} />
            <Route component={Error}/>
          </Switch>
        </div>
      </BrowserRouter>
    )
  }
}

class Test extends React.Component {
  render() {
    const gat = catImage;

    return (
      <div>
        <img src={gat} />
      </div>
    )
  }
}

Answer 1

切换到url-loader而不是file-loader使其起作用。我不知道为什么文件加载器不起作用。哦，很好。

var path = require('path');

module.exports = {
    entry: './src/main/js/app.js',
    devtool: 'sourcemaps',
    cache: true,
    mode: 'development',
    output: {
        path: __dirname,
        filename: './src/main/resources/static/built/bundle.js'
    },
    module: {
        rules: [
            {
              test: /\.(jpg|png|svg)$/i,
              loader: 'url-loader',
              options: {
                outputPath: 'images',
              }
            },
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: [{
                    loader: 'babel-loader',
                    options: {
                        presets: ["@babel/preset-env", "@babel/preset-react"]
                    }
                }]
            }
        ]
    }
};

请确保您使用

import image from './path/to/image.png';

OR

const image = require('./path/to/image.png');
const imageSrc = image.default;

您也可以这样做：

const imagePath = require.context('./path/to/imageDirectory', true);
const imageSrc = imagePath('./image.png', true);

使用Webpack文件加载器加载图像时遇到问题

1 个答案: