Problem in image

[kendrickassignemt]

Failed to compile
./src/App.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/App.css)
Error: Can't resolve '/images/img-2.jpg' in 'C:\Users\kendr\react-website-v1-master\src'

[professordaehn]

I'm getting this error too. This comes up at around 42:00 minute mark when you copy and paste the App.css file from GitHub into the local project. To get by this and carry on with the tutorial, I just commented out the background-image: url('/images/img-*.jpg'); lines from each of the page classes.

[kendrickassignemt]

Done, might be help with "*" but still got the same error. Tried with any path and got this
background-image: url('\images/img-2.jpg');
The best solution : background-image: url('../src/images/img-2.jpg');
Make sure to move the images folder to src folder

[jmaldonado0]

i haven't been able to fix this issue

[professordaehn]

The "fix" is to use url('/public/images/img-2.jpg') but that can't be right; the "root" of the website is the public folder, so it should be '/images/img-2.jpg', but for some reason, the "published" website seems to see the project root as the deployed website root.

[jmaldonado0]

that does'nt seem to fix my issue but thanks in advance
fixed-ish with the option of kendrick i've been able to see the page but the images won't load

[MehulKChaudhari]

I have the same error , How can I resolve it ?

[Filipeasl]

Dude, I'm having this issue too. Tomorrow I will try hard to fix this problem in the best way and come back here with an update for you guys. I guess I have to download yard instead of npm but I will see.

[Karinemoreira]

I have the same error. I read that we need to reinstall npm, but I'm lazy. I just import the images on the page. It works for me

[Filipeasl]

Yes, it's a problem with the CRA's configuration ... you can import images directly from your src, or even use styled components, for example, regardless of configuration, and it's much better than using CSS 🙂
But you can also extend the configuration of the CRA to work the images .. anyway, there are several solutions until the CRA team solves this bug 🙂
The easy way is to put all resources in the src directory and access from there, but you can also eject (I don't recommend) or use some lib that helps you with this, like rescripts:
https://github.com/harrysolovay/rescripts

[Amber-Pittman]

In HeroSection.js file I imported the video and then referenced the import in the return like so:

import React from 'react'
import "../App.css"
import { Button } from "./Button"
import "./Hero.css"
import video from "../videos/video-1.mp4" //THIS BIT

and then go down into the video tag and update the src like so:

<video src={video} autoPlay loop muted />

Hope that helps others!

[adithye]

same issue for me and i made a copy of images in src files and then imported it directly from src and it worked fine for me

[thanhtruongnhu]

Got same issue. Fixed with @kendrickassignemt's solution. Thank you

[MehulKChaudhari]

I have the same error , How can I resolve it ?

I solved that error long time back , by import that image in file and then using name which I use to import, e.g import image from 'image.jpg'

Using {image} at the place where I was using the path of image

[Rutvij-dashputre]

I faced this error , The best solution is to move your images folder to components in the src folder (/src/components/images/img-1.jpg). This is extract the images from src folder. You have to just edit your path in App.css
Hope this would work for sure.

[kristofkruller]

In HeroSection.js file I imported the video and then referenced the import in the return like so:

import React from 'react'
import "../App.css"
import { Button } from "./Button"
import "./Hero.css"
import video from "../videos/video-1.mp4" //THIS BIT

and then go down into the video tag and update the src like so:

<video src={video} autoPlay loop muted />

Hope that helps others!

Thank you, this was the way to fix for me, anyone know what is the reason behind this problem? May it occur by other projects too?

[MehulKChaudhari]

I guess no need to do that for video, we can simply add a path of video, and that works fine.

[Patrick-W-McMahon]

Moving all your images into src is a horrible solution. The public folder is used for static data. For situations where you have images that have no need to be in the build process, they shouldn't be in the src directory. Do not do lazy programming. do real fixes with clean solutions. A developer should be able to have an img directory in the public folder and should have the ability to reference it in native css.

[pereiraaron]

To import images or videos from public folder use this :
<video src={process.env.PUBLIC_URL + "/assets/videos/video-2.mp4"} autoPlay loop muted />
<CardItem src={process.env.PUBLIC_URL + "/assets/images/img-2.jpg"} text="Travel through the Islands of Bali in a Private Cruise" label="Luxury" path="/services" />

Moving the images or videos is not the answer to the problem.

[jtinik101]

@pereiraaron Hi I am new to coding where where would I add the code you recommended?

[ghost]

change url("/image/img-2.jpg") to src = "/image/img-2.jpg". that should fix the problem

[senapahlevi]

actually there is no problem but just a difference in syntax. For example, if your images are all in the public folder, then of course it won't be a problem if you follow the code from this tutorial, but if your images are in the src it won't appear and how do you show it?

example youre image or assets are in src folder :

import pic1 from '../assets/img-3.jpg';

<CardItem
   src ={pic1}
   text='Explore the cileungsi waterfall deep inside'
   label='Adventure'
   path='/services'
   />

example when youre images are in public folder:

<CardItem
   src ='../assets/img-3.jpg'
   text='Explore the cileungsi waterfall deep inside'
   label='Adventure'
   path='/services'
   />

[pereiraaron]

<CardItem src ={process.env.PUBLIC_URL + '/assets/img-3.jpg'} text='Explore the cileungsi waterfall deep inside' label='Adventure' path='/services' />

The assets folder should be in public folder.

@jtinik101 please use this code.

[vahxsx]

Just change the file path. It will work. Put image files into the components and then
for instance
background-image: url('/src/components/images/img-1.jpg')

[korayzun]

If somebody is facing the issue regardless of the steps provided above:

Your App.js has to look like this:

`import React from 'react';
import './App.css';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Navbar from './components/navbar.js';
import Home from './components/pages/Home.js'

function App() {
return (
<>



<Route path = "/" exact element={}/>


</>
);
}

export default App;`

With this you can keep the images in the src folder or the public folder. The .hero-container in herosection.css has to look like this:

.hero-container { background: url('/public/images/home.jpg'); height: 100vh; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; box-shadow: inset 0 180px 180px 180px rgba(0, 0.2, 0.2, 0.6); object-fit: contain; }

I didn't tried it with the video hence I didn't want to include one. This helped me especially because after inspecting the structure in the browser I realized that the just included the navbar and no hero-container. Hope this helps if anybody is still struggling.

[korayzun]

If somebody is facing the issue regardless of the steps provided above:

Your App.js has to look like this:

`import React from 'react'; import './App.css'; import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import Navbar from './components/navbar.js'; import Home from './components/pages/Home.js'

function App() { return ( <> </> ); }

export default App;`

With this you can keep the images in the src folder or the public folder. The .hero-container in herosection.css has to look like this:

.hero-container { background: url('/public/images/home.jpg'); height: 100vh; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; box-shadow: inset 0 180px 180px 180px rgba(0, 0.2, 0.2, 0.6); object-fit: contain; }

I didn't tried it with the video hence I didn't want to include one. This helped me especially because after inspecting the structure in the browser I realized that the just included the navbar and no hero-container. Hope this helps if anybody is still struggling.

Don't know why it rendered it so poorly but the line <Route path = "/" exact element={}/> has to look like this <Route path = "/" exact element={<Home />}/>