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
            }
...

私の反応プレゼンテーションコンポーネントであるImは、単に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');

webpack がコードをバンドルすると、コードが実行されないため、変数の値を知ることができないため、画像の URL を変数にすることはできません。

本当に非同期で要求したい場合。あなたはrequire.ensureを使用しようとすることができます

于 2016-06-27T02:17:35.687 に答える