反应并要求：错误：找不到模块“。”

Question

I have a fairly simple stateless component

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

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

export default Image;

That gives me

Error: Cannot find module "." webpackMissingModule

The image is in the assets folder of my app.

I also tried

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

The path looks like '../../assets/someImage.jpg'

Why cant I use require with a variable name? When I hardcode the path it works... The path I am giving cannot be wrong because if using the wrong path I would get something like

... not found: Can't resolve ....

Answer 1

The problem is require() itself. require() get's fired, when the app starts. When a path is passed statically, require() knows where to look when the app starts and all is good. However, when the path gets passed dynamically, require() does not know on start up of the app where to look for the image. Hence, it does not find it. That is why requiere() cannot take a dynamically created path.

Use src='' relative from your index.html or your public folder (depends on your configuration).

Answer 2

Two things I noticed in your code.

When you want to add css styles to jsx elements you need to use className but lassName. Not sure if it is a typo error :)

When you want to import images and add the path to src.

Do some thing like below and make sure your image path is correct.

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

Answer 3

if its a url

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

or you can store the url in a variable and use in the src like

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

if its a file inside the src folder

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

in your case- Solution

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

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