We Keep Coding

image dont show up(react)

im trying to put an image in my page but it wont show up.even though there are no errors here is my code:
import React from "react";
import img1 from './images/earth-icon.png';
export default function Navbar() {
return(
<div className="header">
<h2 className="title">My Travel</h2>
<img src={img1} alt="cam" />
</div>
)
}
thank you!
i tried to put the image in the public folder and try it like this:
import React from "react";
export default function Navbar() {
return(
<div className="header">
<h2 className="title">My Travel</h2>
<img src="./images/earth-icon.png" alt="cam" />
</div>
)
}
but its the same result.

If you put the image directly into the public folder, then the path of the image changes.
So, if your image is placed like this:
- public
- earth-icon.png
// other folders like src etc.
Instead of
<img src="./images/earth-icon.png" />
try
<img src="/earth-icon.png" />
This url will get translated to https://example.com/earth-icon.png which will point to your public folder.
If you need the same folder structure with images etc. Ensure that the image is placed under a images folder inside public. The you would be able to do:
<img src="/images/earth-icon.png" />
Note that ./ points to the current directory whereas just / points to the public folder

i placed the images folder in the public folder and then i edited the code to be like this:
import React from "react";
export default function Navbar() {
return(
<h2 className="title">My Travel</h2>
<img src="/images/earth-icon.png" alt="" />
</div>
)
} but its the same result no image.

Problems importing images with react .tsx

So I’m trying to import 2 images in this code. They are located in the same folder as the .tsx file
import * as React from 'react'
import './index.css';
import image from './image.jpg';
import image2 from './image2.jpg';
export default function Sl2() {
return (
<div>
<h1
Introduzione
</h1>
<p>
Lorem ipsum
</p>
<img src={image} style={{ width: '200%', height: '200%', transform: 'translate(110%, 0%)' }} />
</div>
)
}
Now if I edit src={image} with src={image2} it doesn’t work, even if both of the images are in the same folder. The error giving is “module not found”. It seems to only work with image and not image2. I also tried editing the “image.jpg” name to something else, and then I also changed it in the code, but everything seems to work ONLY if the image imported has the name “image”

localhost server not displaying image (React)

I am learning react and following a series of challenges to do so. One such challenge has me create a React component that takes in properties. One of these properties is the name of a png file. I was not able to do this correctly but the correct line does not seem to be working.
This is an Ubuntu distro on WSL on a windows laptop.
I have done research on the topic the last few days and most response say to turn off adblocker (did not fix it), change file permissions (also did not work), turn off JS and CSS source maps (also did not work).
I noticed that a manually coded url to an image in the same folder was changed to
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgA…Cxd82/eqNyzDUJ0ohc8k/PbelTLtHJFgAAAAASUVORK5CYII=
My component is
import React from "react";
import star from "../images/star.png";
export default function Card(props) {
return (
<div className="card">
<div className="card--image">
<h3 className="card--availability">SOLD OUT</h3>
<img src={`../images/${props.img}`} alt="not working"></img>
</div>
<div className="card--rating">
<img src={star}></img>
<p className="card--dark-text">{props.rating}</p>
<p className="card--light-text">
({props.reviewCount}) · {props.country}
</p>
</div>
<p className="card--desc">{props.title}</p>
<div className="card--price">
<h5>From ${props.price}</h5>
</div>
</div>
);
}
Which is used in
import React from "react";
import Navbar from "./components/navbar";
import Hero from "./components/hero";
import Card from "./components/card";
export default function App() {
return (
//<Hero />
<div>
<Navbar />
<Card
img="zeferes.png"
rating="5.0"
reviewCount={6}
country="USA"
title="Playing on the beach with me."
price={136}
/>
</div>
);
}
My file directory looks like
And every other property works.
The displayed screen right now is:
What is going wrong?
Thank you for any help.

import for the image file(zeferes.png) is missing in Card component.
importing image file in Card component should fix the issue.

How to prevent laravel from overriding css files after react compilation?

I have a Laravel project where we are using React for new components but about half of the existing pages are older and just use the regular blade files.
In the public folder we have a few css files that are included in app.blade.php which serves as out top file.
Now, it works perfectly until we try to import React Component. As soon as i do this, it recompiles the css in some weird way that it just breaks. All previously used css just seems to stop working.
This is my mix file:
const mix = require('laravel-mix')
mix.js('resources/js/app.js', 'public/js')
.react()
.sass('resources/sass/app.scss', 'public/css')
An example React Component i'm testing (comes from the laravel + react babel preset, i just added the css import):
import React from 'react';
import ReactDOM from 'react-dom';
import './Example.css'
function Example() {
return (
<div className="container">
<div className="row justify-content-center">
<div className="col-md-8">
<div className="card">
<div className="txt-color-white card-header">Example Component</div>
<div className="txt-color-white">ISTO É UM TESTE</div>
<div className="txt-color-white card-body">I'm an example component!</div>
</div>
</div>
</div>
</div>
);
}
And this is my public folder. I'm assuming react css is being thrown into the app.css file but instead of being added (appended) is doing something weird.

Component does not see global styles

Component from globalstyle
Global styles are visible only in this component, col-lg-2,col-md-4 -> globalstyle
import React from 'react'
import ReactDOM from 'react-dom'
import { AppContainer } from 'react-hot-loader'
import { BrowserRouter } from 'react-router-dom'
import App from './containers/App'
import './basestyle/flexboxgrid.min.css' //Global style
ReactDOM.render(
<AppContainer>
<BrowserRouter>
<App/>
</BrowserRouter>
</AppContainer>,
document.getElementById('root')
);
Component that should get styles
import React from 'react'
import { Link } from 'react-router-dom'
import styles from './Header.css'
import icon from './icon.png'
const Header = () => (
<div className="row">
<div className={`col-lg-2 col-md-4 ${styles.test}`} > //Here is not available
<Link to="/категории">
<div className={styles.logoBox}>
<img src={icon} alt="logo"/>
<h1>Белый кот</h1>
</div>
</Link>
</div>
</div>
);
export default Header;
Webpack.config https://github.com/minaev-git/TestQuestion

Try adding global to your class name.
Eg
:global(.yourClass) {
//your css
}

Those styles will only be loaded if <Header /> appears somewhere in <App />. I'm assuming that's the case, but otherwise make sure that the header component shows up in <App />. If that's not working, try looking around your Network tab of the web inspector and reload the page -- see if your CSS is even being loaded.
EDIT: Just seeing where in the code your class isn't working. If .test is a class in your global styles file, it wouldn't show up in the Header.css file. Try removing "styles" and just give it a class of test if test is a class in flexboxgrid.min.css.

Import for CSS is
import './Header.css'
Reference the css classes in your component then with:
<div className="col-lg-2 col-md-4 test" >

You would need to import bootstrap to your index.jsx, currently you are only importing this, require('./basestyle/flexboxgrid.min.css') that is not enough, how will your system know that there is boostrap if its not imported