I have the following Problem:
When I enter the URL to my image directly in the component, it works and gets displayed:
import React, { Component } from 'react';
import './Service.css';
class Service extends Component {
render() {
return (
<div>
<h2 className="logo">{this.props.serviceName}</h2>
<img src={require("../../images/project_management.jpg")} width="150" alt="Smiley face" />
</div>
);
}
}
export default Service;
But when I send the image url through the "props" from the outer component it does not work, although ist the exact same string. I get "Error: Cannot find module '../../images/project_management.jpg'"
import React, { Component } from 'react';
import './Home.css';
import Service from './modules/Service';
class Home extends Component {
render() {
return (
<div className="outer-container">
<div className="inner-container">
<Service serviceName="Project Manager" img="../../images/project_management.jpg" />
</div>
</div>
);
}
}
export default Home;
import React, { Component } from 'react';
import './Service.css';
class Service extends Component {
render() {
return (
<div>
<h2 className="logo">{this.props.serviceName}</h2>
<img src={require(this.props.img)} width="150" alt="Smiley face" />
</div>
);
}
}
export default Service;
Can anybody give me a hint?
Thanks
Regards
This is probably (you have to confirm this) you are using webpack and an image loader to load the content. Webpack will make a static analysis to understand which static assets it needs to include, however, when you make a dynamic require (this means, require a variable) like require(this.props.image) webpack has no idea at bunndle time of what you want to load.
The solution is to always load the full path to the image, then pass that on props:
import React, { Component } from 'react';
import './Home.css';
import Service from './modules/Service';
class Home extends Component {
render() {
return (
<div className="outer-container">
<div className="inner-container">
<Service serviceName="Project Manager" img={require("../../images/project_management.jpg")} />
</div>
</div>
);
}
}
export default Home;
import React, { Component } from 'react';
import './Service.css';
class Service extends Component {
render() {
return (
<div>
<h2 className="logo">{this.props.serviceName}</h2>
<img src={this.props.img} width="150" alt="Smiley face" />
</div>
);
}
}
export default Service;
This is the correct way of doing it if you are using any image bundler that works like I described.
Use absolute path to image instead of relative
<Service serviceName="Project Manager" img={absoltePathToImage} />
Service tries to find the image relative to it's path and fails
If you want to use relative paths(bad idea)
Use
<Service serviceName="Project Manager" img="../../../images/project_management.jpg" />
As service is one layer deeper to Home
instead of using require like one in your code
<img src={require("../../images/project_management.jpg")} width="150" alt="Smiley face" />
you should provide and url directly to src atrib and use it as:
<img src={this.props.img} width="150" alt="Smiley face" />
thank you. Moving the "require"-Statement to the outer component solved the problem:
import React, { Component } from 'react';
import './Home.css';
import Service from './modules/Service';
class Home extends Component {
render() {
return (
<div className="outer-container">
<div className="inner-container">
<Service serviceName="Project Manager" img={require("../images/project_management.jpg")} />
<Service serviceName="Software Engineer" img={require("../images/project_management3.jpg")} />
<Service serviceName="Web Developer" img={require("../images/web_development.jpg")} />
</div>
<div className="inner-container">
<Service serviceName="Requirements Enigneer" img={require("../images/requirements_engineering.jpg")} />
<Service serviceName="Quality Manager" img={require("../images/quality_management.jpg")} />
<Service serviceName="Trainer" img={require("../images/trainer.jpg")} />
</div>
</div>
);
}
}
export default Home;
Related
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" />;
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.
Having this file:
Product.jsx:
class Product extends React.Component{
render(){
return (
<div className='item'>
<div className='image'>
<img src="images/products/image-aqua.png" />
</div>
<div className="middle aligned content">
<div className="description">
<a>Fort Knight</a>
<p>Authentic renaissance actors, delivered in just two weeks.</p>
</div>
<div className="extra">
<span>Submitted by:</span>
<img src="images/avatars/daniel.jpg" className="ui avatar image" />
</div>
</div>
</div>
)
}
}
export default Product;
and ProductList.jsx:
import Product from "./Product";
class ProductList extends React.Component{
render(){
return (
<div className='ui unstackable items'>
<Product />
</div>
)
}
}
ReactDOM.render(
<ProductList />,
document.getElementById('content')
);
The React Class <Product /> is not rendered (If I try to simply paste the Product class into ProductList.jsx, no problem then, but I want separate files for each class, how to achieve that?)
Use in Product.jsx the import React from "react";
demo in stackblitz
First import React at the top.
import React from "react";
Second you might be giving the wrong address at the top. Make sure it is right. You know the path well. Apart from these I don't see any problem with the code.
import Product from "./Product";
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" />;
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/>