5

我正在为我的 React 应用程序使用 Webpack。

我在我的 webpack 配置中安装了 'File-loader' 和 'Url-loader'。

但是，我不确定如何将图像链接到我的组件。我将图像的“src”保存在“Data.js”文件中，从该文件中将图像的数据传递给反应组件。

我的 webpack.config.js：

...
const PATHS = {
    app : path.join( __dirname, "app" ),
    build : path.join( __dirname, "build" )
};

const common = {
    entry : {
        app : PATHS.app
    },
    output : {
        path : PATHS.build,
        filename : "bundle.js"
    },
    module : {
        preLoaders : [
...
        loaders : [
            {
                test : /\.css$/,
                loaders : [ "style", "css" ],
                include : PATHS.app
            },
            {
                test : /\.jsx?$/,
                loader : "babel",
                query : {
                    cacheDirectory : true,
                    presets : [ "react", "es2015" ]
                },
                include : PATHS.app
            },
            {
                test : /\.(jpg|png)$/,
                loader : "file-loader?name=[name].[ext]",
                include : PATHS.app
            }
...

我的反应演示组件，我只是require用来检索图像：

const PreviewTemImgParent = ({ data }) => {
    let img = require( data.get( "src" ));
    return(
        <div className = "card previewImgParent">
            <img
             src = { img }
    ...

Data.js 文件具有每个图像的绝对路径（主应用程序文件夹）（我可能在这里出错）：

export const previewTemImgData = Map({
    body : List.of(
        Map({   // using immutable.js
            src : "app/css/asset/template/png/body/GatheredAtEmpireLine.png",
            alt : "image",
            className : "flipParent",
...

全局目录图像的价值：

在此处输入图像描述

我想知道我在哪里犯了错误以及如何解决这个问题？

编辑： 阅读后，我认为 webpack 需要参考图像的相对位置，所以我将 webpack.config.js 修改为以下内容：

...
output : {
  path : PATHS.build,
  publicPath : "/",
  filename : "bundle.js"
}
...

然而，这并不能解决问题。指导将不胜感激。

4

2 回答 2

3

webpack 现在不支持异步资源，这意味着如果你想要图片，你应该把图片的路径发送给它。就像这样：

let img = new Image();
img.src = require('./images/1.jpg');

图片的 url 不能是变量，因为当 webpack 打包你的代码时，它不会运行你的代码，所以它不能知道你的变量的值。

如果你真的想异步要求。你可以尝试使用require.ensure

于 2016-06-27T02:17:35.687 回答
3

建议：

1.url-loader用于图像。
通过limit在您的 webpack 配置中指定 ，例如：url-loader?limit=8000，如果文件小于 8000 字节。url-loader作品看起来像file-loader。将文件嵌入到主条目的捆绑输出中。如果不是，请参阅第 2 点。

2.在 css/scss 中使用 url(address) 来使用图片
下面是一个由 Webpack 和 url-loader 提供支持的示例：
background: url('../images/heroBanner.png') no-repeat center center fixed;

并且因为文件足够大，webpack 就像其他 bundle 一样将文件转换到输出目录。当网页加载时，它将发送一个对该图像的 HTTP 请求。

在此处输入图像描述

https://github.com/EcutDavid/EcutDavid.github.io/blob/8346f18dccdae18c4d6e98eb9b8cc51d62338cb5/src/styles/Header.scss#L2

于 2016-06-27T03:51:01.760 回答