Question

我想在我的网站上显示一个图像我正在建立反应。这是组件源代码：

import React, { Component } from 'react';
import style from './styles/AboutMeStyle.css';

export default class AboutMe extends Component{
    render(){
        return (
            <div>
                <img src={require ('./images/ProfilePic.jpg')}align="middle"/>
            </div>
        );
    }
}

该文件似乎被找到，但我一直得到一个例外，说明模块解析失败了......？以下是来自终端的错误的文本输出：

Module parse failed: /Users/megan/Desktop/Personal Website/client/components/images/ProfilePic.jpg
Unexpected character (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character (1:0)
...

我写错了代码吗？或者我错过了一个模块？我已经安装了image-webpack-loader，但它似乎没有做任何事......这是我的webpack.config.js：

module.exports = {
    entry: './client/index.js',
    output: {
        path: __dirname + '/public/js',
        filename: 'bundle.js'
    },
    devtool: 'source-map',
    stats: {
        colors: true,
        reasons: true
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules)/,
                loaders: ['babel']
            },
            {
                test: /\.css$/,
                loaders: ['style-loader', 'css-loader']
            }
        ]
    }
}

Answer 1

require用于导入javascript代码。你可能想要这样的东西：

<img src="/images/ProfilePic.jpg" align="middle"/>

将从您的公共图像文件夹中读取。仔细查看您的终端，我发现您的图像位于components文件夹中。通常，除了javascript组件之外，您希望在公共目录中包含一些images / other资产文件夹。

Webpack会将所有代码编译成一个包，您的网络服务器会公开根目录下的公共文件。

有关详细信息，请参阅webpack publicPath config options。

对于React组件，<img/>中的.jpg模块解析失败了吗？

1 个答案: