0

I am trying to simply render a local image file in my React application:

import React, { Component } from 'react'
import {Container, Row, Col} from 'react-bootstrap';
import ImageCar from './ImageCar.js'

class Birding extends Component {

    render() {
        return (
            <div>
                <img src={require('../Birding/Images_Dec/Robin.JPG')}></img>
                <ImageCar />
            </div>
        )
    }
}

export default Birding
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Unfortunately I am getting a broken image icon, and I cannot figure out why. I am certain the relative path is correct, because when I enter a non-existing image I get an error. I am not getting an error with the code above, but the image simply is not rendering.

I should add that importing the image like "import Robin from '../Birding...etc' " is NOT an option, as I plan to render a list of images that I cannot hard code via importing.

Any help appreciated.

ykobe323
  • 31
  • 2
  • Have you tried using `import Robin from '../Birding/Images_Dec/Robin.JPG';` and assigning that as the `src={Robin}`? – dvr Dec 11 '20 at 04:00
  • I just made an edit clarifying that this is not an option for me. It does indeed work, but I plan on rendering a list of images and I cannot realistically import each one individually – ykobe323 Dec 11 '20 at 04:01
  • In that case you might be interested in this question: https://stackoverflow.com/questions/50426995/importing-an-image-dynamically-in-react-component – dvr Dec 11 '20 at 04:08
  • Try with this answer https://stackoverflow.com/questions/65083234/module-not-found-you-attempted-to-import-which-falls-outside-of-the-project-src/65083276#65083276 – kunquan Dec 11 '20 at 05:28

0 Answers0