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" />;
Related
I'm trying to use the Image component provided by next.js.
This Is My Simple Header Component
import Image from 'next/image'
import React from 'react'
import myImage from '../assets/IMG-20221115-WA0001.jpg'
function Header() {
return (
<header>
<div>
<div>
<Image
src={myImage}
width={50}
height={10}
alt="Logo"
/>
</div>
</div>
</header>
)
}
export default Header
The error seems to be error window from the webpack, so I don't exactly know how to resolve it.
You can move the image to the /public folder and pass the path to the src Image property
import Image from 'next/image'
import React from 'react'
function Header() {
return (
<header>
<div>
<div>
<Image
src={'/IMG-20221115-WA0001.jpg'}
width={50}
height={10}
alt="Logo"
/>
</div>
</div>
</header>
)
}
export default Header
To make Next/Image work, you need to provide the path see https://nextjs.org/docs/api-reference/next/image#src
note: you can leave the image in the same path and pass it to the src property but using the relative path instead of statically imported
you need to add require for giving absolute path
import Image from 'next/image'
import React from 'react'
import myImage from '../assets/IMG-20221115-WA0001.jpg'
function Header() {
return (
<header>
<div>
<div>
<Image
src={require(myImage)}
width={50}
height={10}
alt="Logo"
/>
</div>
</div>
</header>
)
}
export default Header
**I learnt React router version 5 but I do not understand how version 6.4.3 works
App.js
import React from 'react';
import './App.css';
import Header from './Header';
function App() {
return (
<div className="app">
<Header/>
</div>
);
}
export default App;
Header.js
import React, {useState} from 'react'
import './Header.css';
import MenuIcon from '#mui/icons-material/Menu';
import SearchIcon from '#mui/icons-material/Search';
import VideoCallIcon from '#mui/icons-material/VideoCall';
import AppsIcon from '#mui/icons-material/Apps';
import NotificationAddIcon from '#mui/icons-material/NotificationAdd';
import { Avatar } from '#mui/material';
import { Link } from "react-router-dom";
function Header() {
const [inputSearch, setInputSearch] = useState('');
return (
<div className='header'>
<div className='header_left'>
<MenuIcon />
<Link to='/'>
<img
className='header_logo'
src='https://upload.wikimedia.org/wikipedia/commons/e/e1/Logo_of_YouTube_%282015-2017%29.svg'
alt='' />
</Link>
</div>
<div className='header_input'>
<input onChange={(e) => setInputSearch(e.target.value)}
value={inputSearch}
type='text' placeholder='Search'/>
<Link to={`/search/${inputSearch}`}>
<SearchIcon className='header_inputbutton' />
type here
</Link>
</div>
<div className='header_icons'>
<VideoCallIcon className='header_icon' />
<AppsIcon className='header_icon'/>
<NotificationAddIcon className='header_icon'/>
<Avatar src='' alt='Igbe Ajaga'/>
</div>
</div>
)
}
export default Header
I tried to use react router but the Header component which has react router imported is displaying a blank white space on my browser while the other components without react router are displaying correctly.**
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.
It works when I give the part inside app.js but it shows blank screen when it is put in another file navbar.js and imported. If the code in navbar.js is directly added in app.js instead of importing, it works fine and navbar appears. Otherwise blank screen appears.
index.js is shown below:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);
app.js file
import React, { Component } from 'react';
import navbar from './navbar.js';
class home extends Component {
render() {
return (
<div>
<navbar />
</div>
);
}
}
export default home;
navbar.js file:
import React, { Component } from 'react';
import {Navbar} from 'react-bootstrap';
import {NavItem} from 'react-bootstrap';
import {Nav} from 'react-bootstrap';
class navbar extends Component{
render() {
return (
<Navbar collapseOnSelect>
<Navbar.Header>
<Navbar.Brand>
React-Bootstrap
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<NavItem eventKey={1} href="#">Link</NavItem>
<NavItem eventKey={2} href="#">Link</NavItem>
</Nav>
<Nav pullRight>
<NavItem eventKey={1} href="#">Link Right</NavItem>
<NavItem eventKey={2} href="#">Link Right</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
);
}
}
export default navbar;
Please help, thanks in advance.
You should always start the name of your custom React components with
a uppercase letter.
import React, { Component } from 'react';
import Navbar from './Navbar.js';
class Home extends Component {
render() {
return (
<div>
<Navbar />
</div>
);
}
}
export default Home;
and it's recommended to use the same name for the file name as well. So it should be ./Navbar.js instead of ./navbar.js
Read this page from the official documentation for more information.
Always start component names with a capital letter. For example, <div/> represents a DOM tag, but <Welcome /> represents a component and
requires Welcome to be in scope.
Sorry if this is a duplicate question. I can't seem to solve this or find an answer.
Essentially I want to display an image so it responsively adjusts depending on screen size. I'm using the React-Bootstrap example and it just isn't working. Here is the code I'm using and here is a link to the example https://react-bootstrap.github.io/components.html#media-content .
import React from 'react';
import {ResponsiveEmbed, Image} from 'react-bootstrap';
export default React.createClass ( {
render() {
return (
<div style={{width: 660, height: 'auto'}}>
<ResponsiveEmbed a16b9>
<embed type="image/href+xml" href = "https://static.pexels.com/photos/296886/pexels-photo-296886.jpeg"/>
</ResponsiveEmbed>
</div>
);
}
});
This is the App.jsx file it connects too
import React from "react"
import { render } from "react-dom"
import Footer from "./components/Footer"
import HeaderNavigation from "./components/HeaderNavigation"
import App1Container from "./containers/App1Container"
import Carousel from "./components/Carousel"
class App1 extends React.Component {
render() {
return (
<div>
<HeaderNavigation />
<Carousel />
<App1Container/>
<Footer/>
</div>
)
}
}
render(<App1/>, document.getElementById('App1'))
If you want just image why not to use:
<Image src="https://static.pexels.com/photos/296886/pexels-photo-296886.jpeg" responsive />
Bootstrap Jumbotron stuff does not deal with background image. Try this instead
at top of file:
import Jumbotron from "./src/img/1.png"
in your div:
<img style={{height:'auto',width:'100%'}} src={ Jumbotron }/>
Try replacing this code:
const responsiveEmbedInstance = (
<div style={{width: 500, height: 'auto'}}>
<ResponsiveEmbed a16by9>
<embed type="image/svg+xml" src="https://static.pexels.com/photos/296886/pexels-photo-296886.jpeg" />
</ResponsiveEmbed>
</div>
);
Here is an example: http://jsfiddle.net/jayesh24/ywzw5hrt/
It should be a16by9 and not a16b9. Answered by rishipuri
Use react-bootstrap package
import Image from "react-bootstrap/Image";
import "bootstrap/dist/css/bootstrap.css";
<Image src="image.png" fluid/>