Base64エンコードされた画像が表示されました

Question

私の反応（ブートストラップ）プロジェクトに背景画像を追加する際に問題があります。

url/fileローダーを使用してイメージをbase64文字列としてロードしてエンコードし、コンポーネントのスタイルに追加することに関する多くの情報がすでに見つかりました。

ただし、私のBase64でエンコードされた背景画像は表示されません。正しくロードされていますが。ここで

は、関連するJSXコードです... SO上

同様の質問（例えば0）は、例えば、文字列を叩いなければならなかったと言って（エラーをコードに示唆した。しかし、私はローダが返す文字列を変更しないでください：ここ

var background = require('url-loader!./../images/bg_1.jpg') 

export default class MainView extends React.Component { 
    render() { 
    var s = { 
     backgroundImage: 'url(' + background + ')', 
     backgroundSize: "cover", 
     backgroundRepeat: "no-repeat", 
     width: "600px", 
     height: "400px" 
    } 

    return (
     <div id="MainView" style={s}>  
     </div> 
    ); 
    } 
} 

が得られたDOMのスクリーンショットである：

スクリーンショットは、私は疑わしい見つける文字列のパターンを示すbase64文字列がさらにwは終了します。 i = 'である。他のSO投稿（2）は、文字列が '=='で終わるべきだと提案しました。しかし、このポストは古く、クロムのバグです。私もfirefoxを試して、最後に '='を追加しましたが、両方のブラウザで何もしません。あなたの助けのための

{ 
    test: /\.jpg/, 
    exclude: /node_modules/, 
    loader: "url-loader" 
} 

感謝を次のように

ローダはWebPACKのコンフィグに追加されます。

Answer 1

結果のDOMでは、複数のbase64コンテンツが表示されます。

base64 URIの改行の前に、バックスラッシュ\を入れてください。

小さなbas64 URI画像をテストとして試してみるか、background変数に改行文字があるかどうかをチェックすることができます。