反應並要求：錯誤：找不到模塊“。”

Question

我有一個相當簡單的無狀態組件

const Image = ({
    uri,
}) => {
    function getImage(uri) {
        return require(uri);
    }

    return (
        <img
            className='image'
            src={getImage(uri)} />
    )
}

export default Image;

那給我

錯誤：找不到模塊“。” webpack缺少模塊

該圖像位於我的應用程序的assets文件夾中。

我也試過

<img
    lassName='image'
    src={require(uri)} />

路徑看起來像'../../assets/someImage.jpg'

為什么我不能在變量名中使用require ？ 當我對路徑進行硬編碼時，...給出的路徑不會錯，因為如果使用錯誤的路徑，我會得到類似

...未找到：無法解決....

Answer 1

問題是require()本身。 應用啟動時會觸發require()被觸發。 當靜態傳遞路徑時， require()知道應用程序啟動時在哪里尋找，一切都很好。 但是，當路徑動態傳遞時， require()在應用程序啟動時並不知道在哪里尋找圖像。 因此，它找不到它。 這就是為什么requiere()無法采用動態創建的路徑的原因。

使用src=''從你親戚index.html或您的public文件夾（取決於您的配置）。

Answer 2

我在您的代碼中注意到了兩件事。

當您要向jsx元素添加CSS樣式時，需要使用className而不是lassName。 不知道這是否是拼寫錯誤:)

當您要導入圖像並將路徑添加到src時。

執行以下操作，並確保您的圖像路徑正確。

import uri from '../../assets/someImage.jpg';
<img
className='image'
src={uri} />

Answer 3

如果是網址

 <img src={'https://cdn-images-1.medium.com/max/1600/1*DsD06sTC-X5AVj_m9nElRg.jpeg'}></img>

或者您可以將網址存儲在變量中，並在src中使用，例如

var url = 'https://cdn-images-1.medium.com/max/1600/1*DsD06sTC-X5AVj_m9nElRg.jpeg';
        <img src={url}></img>

如果它是src文件夾中的文件

<img src={require('./logo.svg')}></img> 

在您的情況下-解決方案

 getImage = (url) => {
     return require(`${url}`)
   }

  <img src={this.getImage(url)}></img>