Question

我有一个非常简单的React组件，它应该显示一个图像。我也在使用Webpack进行捆绑。

可能值得注意的是我使用 ReactJS.NET 。

虽然webpack包构建正确，并且webpack生成的.jpg是可见的（例如，使用Windows Photo Viewer），但图像不会显示在我的视图中。

当我看一下检查器时，html结构是正确构建的，但我得到了：

＆＃34;无法加载图片＆＃34; - 当我将鼠标悬停在图像路径上时。

我确保图像路径正确。

以下是我的反应部分：

var React = require('react');
var BackgroundImg = require('./Images/img_fjords.jpg');

class Login extends React.Component {
    render() {
        return (
            <img src={BackgroundImg} />
        );
    }

    componentDidMount() {
        console.log("Mounted");
    }
}

module.exports = Login;

Webpack配置：

var path = require('path');
var WebpackNotifierPlugin = require('webpack-notifier');

module.exports = {
    context: path.join(__dirname, 'App'),
    entry: {
        server: './server',
        client: './client'
    },

    output: {
        path: path.join(__dirname, 'Built/'),
        publicPath: path.join(__dirname, 'Built/'),
        filename: '[name].bundle.js'
    },
    plugins: [
        new WebpackNotifierPlugin()
    ],
    module: {
        loaders: [
            { test: /\.css$/, loader: "style-loader!css-loader" },
            {
                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: "url-loader?limit=10000&mimetype=application/font-woff"
            },
            { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" },
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' },
            { test: /\.jsx$/, loader: 'jsx-loader?harmony' }
        ]
    },
    resolve: {
        // Allow require('./blah') to require blah.jsx
        extensions: ['.js', '.jsx']
    },

    externals: {
        // Use external version of React (from CDN for client-side, or
        // bundled with ReactJS.NET for server-side)
        react: 'React'
    }
};

Answer 1

在@Luggage的帮助下解决了这个问题。

webpack.config错误，应该是：

output: {
        path: path.join(__dirname, 'Built/'),
        publicPath: 'Built/',
        filename: '[name].bundle.js'
    },

Answer 2

好吧，我看不到你的webpack配置，但是我假设你使用了所有正确的加载器（file-loader，extract-loader，html-loader，url-loader）？我处理它的方法是使用webpack-copy-plugin复制我的图像文件夹，以便相对路径仍然有用。

无法加载正确捆绑的图像

2 个答案: