現在顯示Base64編碼圖像

我在添加背景圖像到我的反應（引導程序）項目時遇到問題。現在顯示Base64編碼圖像

我已經找到許多關於使用url/file加載器加載和編碼圖像爲base64字符串然後將它們添加到組件樣式的信息。

但是，我的base64編碼背景圖像沒有顯示。雖然正確加載。

上如此相似的問題（比如0）暗示編碼錯誤（例如，說的字符串必須拍，但我不改變裝載機返回字符串...

下面是相關JSX代碼：

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的屏幕截圖：

的屏幕截圖顯示字符串中的圖案，其中我發現可疑的基於64串進一步端瓦特ith'='。其他SO帖子（2）建議該字符串應以'=='結尾。然而，這篇文章已經有幾年了，並且涉及到一個鉻版的bug。我也嘗試過Firefox並在最後添加'='，但它在兩個瀏覽器中都沒有做任何事情。

裝載機在配置的WebPack添加如下：

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

感謝您的幫助。

來源

2017-04-16 Coeus

在生成的DOM中，我可以看到多行base64內容。

請確保在base64 uri中的任何換行符之前加上反斜槓\。

如果background變量有任何換行符，您可以嘗試任何小的bas64 uri圖像作爲測試或檢查。

來源

2017-04-16 13:53:11 Hossam

我不認爲字符串中有換行符。多線只是鉻的分界線。控制檯日誌（background.split（「\ n」）。）返回1。 – Coeus

現在顯示Base64編碼圖像

回答

相關問題