Develop Reference

Img tag doesn't show image in React JSX

I'm trying to add a logo to a Header component in react, but it's not showing.
It's like it is transparent because if I justify items with flex and space between, it counts like an element. I don't know what I'm doing wrong.
import React from "react";
import "./Header.css";
const Header = () => {
return (
<div className="header">
<img src="../img/logo.png" alt="" />
<h1>ONE</h1>
<h1>TWO</h1>
</div>
);
};
export default Header;

import logo from '<PATH>';
return <img src={logo} alt="Logo" />;

Linking Image Issue

I am trying to link my picture but it's not working
Any idea what I have forgotten?
Code:
import React, { Component } from 'react';
export default class Card extends Component {
render() {
return (
<div>
<img src="../img/img_avatar.png" alt="Card"></img>
</div>
);
}
}
[Structure][1]

Images are self-closing tags, so you would use it like:
<img src="../img/img_avatar.png" alt="Card" />
instead of what you're using.

How can I display my image in a React app? [duplicate]

This question already has answers here:
How do I reference a local image in React?
(28 answers)
Closed 2 years ago.
I am having trouble loading images in a React app created with create-react-app. Loading the images return a 304 Not Modified response.
Here is my code:
App.js:
import logo from './logo.svg';
import { Navbar, NavbarBrand } from 'reactstrap'
import Menu from './components/MenuComponent';
import './App.css';
function App() {
return (
<div>
<Navbar dark color="primary">
<div className="container">
<NavbarBrand href="/" >Home</NavbarBrand>
</div>
</Navbar>
<Menu />
<img src="assets/images/uthappizza.png" alt=""/>
</div>
);
}
export default App;
Thanks!

Looking at https://create-react-app.dev/docs/adding-images-fonts-and-files/, you need to do:
import React from 'react';
import logo from './logo.svg';
import { Navbar, NavbarBrand } from 'reactstrap'
import Menu from './components/MenuComponent';
import './App.css';
import pizza from './assets/images/uthappizza.png'; // Tell webpack this JS file uses this image
function App() {
return (
<div>
<Navbar dark color="primary">
<div className="container">
<NavbarBrand href="/" >Home</NavbarBrand>
</div>
</Navbar>
<Menu />
<img src={pizza} alt=""/>
</div>
);
}
export default App;
You can also read more about how WebPack works here.

This is the right way of importing static assets:
import VariableName from "../relative/path/to/image.png";
import image from './assets/images/uthappizza.png';
The imported variable image contains the full URL relative to the app for assets/images/uthappizza.png . You just need to change to:
import image from './assets/images/uthappizza.png';
<img src={image} alt="Logo" />;

React: Fade slideshow not working. How to fix it?

I am getting an error while trying to implement the Fade slideshow. The required image is:
The required codes are:
Home.js
import React, {Component} from 'react';
import Header from '../Header/Header';
import Slideshow from '../Slideshow/Slideshow';
class Home extends Component{
render(){
return(
<div>
<Header/>
<Slideshow/>
</div>
)
}
};
export default Home;
Slideshow.js
import React from 'react';
import { Fade } from 'react-slideshow-image';
const images = [
'https://media.gettyimages.com/photos/al-pacino-sits-in-a-chair-in-a-scene-from-the-film-the-godfather-part-picture-id159840433?s=2048x2048',
'https://media.gettyimages.com/photos/al-pacino-us-actor-sitting-in-an-armchair-in-a-publicity-still-issued-picture-id139630136?s=2048x2048'
];
const Slideshow = () => {
return (
<Fade
images={images}
duration="5000"
transitionDuration="1000"/>
)
}
export default Slideshow;
Please tell me how to fix it.

You can pass your images as children to Fade component not props:
import React from 'react';
import { Fade } from 'react-slideshow-image';
const images = [
'https://media.gettyimages.com/photos/al-pacino-sits-in-a-chair-in-a-scene-from-the-film-the-godfather-part-picture-id159840433?s=2048x2048',
'https://media.gettyimages.com/photos/al-pacino-us-actor-sitting-in-an-armchair-in-a-publicity-still-issued-picture-id139630136?s=2048x2048'
];
const Slideshow = () => {
return (
<Fade>
// first child
<div className="each-fade">
<div className="image-container">
<img src={images[0]} />
</div>
<h2>First Slide</h2>
</div>
// second child
<div className="each-fade">
<div className="image-container">
<img src={images[1]} />
</div>
<h2>Second Slide</h2>
</div>
</Fade>
)
}
export default Slideshow;

how do i reuse a react component but with different colours?

Hi I am very new to react and coding so please baby me in your explanations.
I have created a component in react named Header1. I have used dynamic text using props so I can change the wording for each time I use the Header1 component. I am wondering how do I do that for the style. I would like one card to have pink text and another to have blue text. Please help! And thank you in advance :)
The following is the creation of the Header1 component:
import React from 'react';
import WhiteMap from '../img/other/whiteWorld.png';
import HeaderScss from './_Header1.scss'
const header1 = (props, style)=>{
return <div className="main--container">
<header className="header--container__inside">
<section className="header--container__left">
<h1>
{props.headerTitle}
{style.headerTitleS}
</h1>
<p>
{props.headerDescription}
</p>
</section>
<section className="header--container__right">
<div className="header--pic">
<img src={WhiteMap} alt="World map with a circle highlighting Australia"/>
</div>
</section>
</header>
</div>
};
export default header1;
The following is the main App.js file where I am using the Header1 component twice:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Navigation1 from './Navigation/Navigation1';
import Header1 from './Header/Header1';
import SaveMoney1 from './SaveMoney/SaveMoney1';
import Airports1 from './Airports/Airports1';
// import SydneyCards1 from './SydneyCards/SydneyCards1';
import ThingsYouShouldKnow1 from './ThingsYouShouldKnow/ThingsYouShouldKnow1';
// import BucketList1 from './BucketlistCards/BucketlistCards1';
// import Footer1 from './Footer/Footer1';
import styles from './appStyles.module.css';
class App extends Component {
render() {
return (
<div className="App">
<Navigation1 />
<Header1 headerTitle="Fly to" headerDescription=" Selia."/>
<SaveMoney1/>
<Airports1/>
<Header1 headerTitle="Things you should know" headerDescription ="Based on customer bookings,
{/* <BucketList1/> */}
{/* <SydneyCards1/> */}
{/* <Footer1/> */}
</div>
);
}
}
export default App;

One of the ways would be using styles, like you're trying to do in your example. Try to do something like this
const Header = (props) => {
return <h1 style={props.style}>{props.title}</h1>
}
And you would render it like this
const App = () => {
return (
<div>
<Header title="My Header with Blue text" style={{color: "blue"}} />
<Header title="My Header with Red text" style={{color: "red"}} />
</div>
)
}
Note: You can do the same passing a CSS class as a prop instead of the exact style object.