如何使用動態數據作出反應將圖像加載到頁面上？

我想在我的顯示圖像反應的應用頁面如何使用動態數據作出反應將圖像加載到頁面上？

import egypt from '../images/egypt.svg' 

<div> 
    <img src={egypt}/> 
</div>

這是這樣做的正確方法？

此外，我想從這樣一個對象加載：

options: [{ 
     optionOne: { 
     answer: 'bolivia', 
     image: './images/egypt.svg' 
     } 
    }]

我怎麼能顯示它在屏幕上？

我的錯誤是說我需要一個合適的加載程序。我試圖用這樣的：https://www.npmjs.com/package/image-webpack-loader

但它說：Can't resolve 'file-loader'

{ 
    test: /\.svg$/i, 
    loaders: [ 
     'file-loader?hash=sha512&digest=hex&name=[hash].[ext]', 
     'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false' 
    ] 
    }

來源

2017-07-24 The Walrus

你爲什麼要導入的圖像文件？你爲什麼不使用圖像標籤的常規'src'屬性，以及圖像文件的URL？沒有什麼特別的，你需要做 – inostia

@inostia，如果你確實使用了與webpack的反應，你會知道你需要導入或需要圖像，然後將其作爲源提供 –

你是否安裝了文件加載器？ –

如果

import egypt from '../images/egypt.svg' 

<div> 
    <img src={egypt}/> 
</div>

在你的代碼工作的，你已配置的WebPack正確，你將能夠動態顯示React中的圖像通過在模板文字的幫助下要求它們，例如

<img src={require(`${obj.optionOne.img}`)}

另外，還要確保你安裝url loader與命令

npm install -s url-loader

您需要將webpack與url-loader配置爲

{ 
     test: /\.(jpe?g|png|gif|svg)$/, 
     use:['url-loader'] 
    }

來源

2017-07-24 18:50:53

obj.optionOne.img本身就是字符串。爲什麼我們需要模板文字？ –

因爲直接寫需要（obj.optionOne.img）莫名其妙地不能解決它 –

雅直接通過字符串變量要求不能解決它。看到模板文字如何處理這個技巧是很奇怪的。 –

如何使用動態數據作出反應將圖像加載到頁面上？

回答

相關問題