cannot view images in react component

Question

<section className="slider">
        <ul className="slides">
            <li>
                <img src="5.jpeg" alt=""/>
                <div className="caption center-align">
                    <h2>Take Your Dream Vacation</h2>
                    <h5 className="light grey-text text-lighten-3 hide-on-small-only">Lorem ipsum dolor sit amet
                        consectetur adipisicing elit. Veniam non illo earum cumque id est!</h5>
                    <a href="#" className="btn btn-large">Learn More</a>
                </div>
            </li>
            <li>
                <img src="2p.jpeg" alt=""/>
                <div className="caption left-align">
                    <h2>We Work With All Budgets</h2>
                    <h5 className="light grey-text text-lighten-3 hide-on-small-only">Lorem ipsum dolor sit amet
                        consectetur adipisicing elit. Veniam non illo earum cumque id est!</h5>
                    <a href="#" className="btn btn-large">Learn More</a>
                </div>
            </li>
            <li>
                <img src="3p.jpeg" alt=""/>
                <div className="caption right-align">
                    <h2>Group & Individual Getaways</h2>
                    <h5 className="light grey-text text-lighten-3 hide-on-small-only">Lorem ipsum dolor sit amet
                        consectetur adipisicing elit. Veniam non illo earum cumque id est!</h5>
                    <a href="#" className="btn btn-large">Learn More</a>
                </div>
            </li>
        </ul>
    </section>

I added the materialize css carousel in the JSX, the slider works, but the images are blank, the images don't seem to show on the carousel.

files not accessible/not served as static/bad url/path..etc... check network request/response — xadm
– xadm, Commented May 25, 2020 at 0:04
Your codes are ok, just check the address of images. seems your images URLs don't respond. — AmerllicA
– AmerllicA, Commented May 25, 2020 at 0:30
They are static. Meaning they are hard coded. I don 't seer any errors, so I'm not sure what the problem might be — shlomo minkowicz
– shlomo minkowicz, Commented May 25, 2020 at 1:14

anouar.charij · Accepted Answer · 2020-05-25 01:35:43Z

1

You have to check the src (path) of the images, if they are in the same directory you can change the src to ./[IMG], either if they are in another directory you must set the full path.

For example, if you have this structure :

--src/ --assets/ --img/ --... --components/ --Slider.jsx

You must set as src ./../assets/img/[IMG]

I hope this will help.

answered May 25, 2020 at 1:35

anouar.charij

812 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

shlomo minkowicz Over a year ago

So I did set it to the whole directory path to where the images are ( <img src="/src/components/pages/img/resort1.jpg" alt=""/>) but it still doesn't show. I'm doing something wrong here

anouar.charij Over a year ago

Could you share with us the structure of your project?

shlomo minkowicz Over a year ago

How can I do that ?

shlomo minkowicz Over a year ago

here is the github repo github.com/shloimimink/custom-pillows. FYI the images are just a test to see if it works

anouar.charij Over a year ago

You can also : import resort from './img/resort1.jpg; ... <img src={resort} alt=""/>

Collectives™ on Stack Overflow

cannot view images in react component

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related