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.
Related
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";
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.
I am trying to make some of my code a link. I am using react class components. I have a paragraph that has the words "Follower's Profile" and referencing a particular URL. Here is my code:
import React from 'react';
class FollowerCard extends React.Component {
render() {
return(
<div className="followerContainer">
{this.props.followers.map(follower =>
<div className="followerCard">
<img src={follower.avatar_url}/>
<p className="followerUserName">Follower's Username: {follower.login}</p>
<p className="followerProfile">Follower's Profile: {follower.html_url}</p>
</div>
)}
</div>
)
}
}
export default FollowerCard;
Basically I am having issues with making {follower.html_url} a clickable url. Currently it will say Follower's Profile: http://somelink.com but "http://somelink.com" isn't clickable. If I try to just wrap this whole thing in an anchor, it also anchors "Follower's Profile" which isn't what I want to happen.
<p className="followerUserName">Follower's Username: <a href={follower.login}>{follower.login}</a></p>
<p className="followerProfile">Follower's Profile: <a href={follower.html_url}>{follower.html_url}</a></p>
import React from 'react';
class FollowerCard extends React.Component {
render() {
return(
<div className="followerContainer">
{this.props.followers.map(follower =>
<div className="followerCard">
<img src={follower.avatar_url}/>
<p className="followerUserName">Follower's Username: {follower.login}</p>
<p className="followerProfile">Follower's Profile: {follower.html_url}</p>
</div>
)}
</div>
)
}
}
export default FollowerCard;
I'm using Filter Input from blueprintjs in a reactjs project, but the style doesn't load correctly, here's my code:
Assigning.jsx
import './Assigning.scss';
export default class Assigning extends Component {
render() {
return (
<div className="bp3-input-group modifier">
<span className="bp3-icon bp3-icon-filter" />
<input
type="text"
className="bp3-input modifier"
placeholder="Filter histogram..."
/>
</div>
);
}
}
Assigning.scss
#import '~#blueprintjs/core/lib/css/blueprint.css';
#import '~#blueprintjs/icons/lib/css/blueprint-icons.css';
is ~ character required at the beginning of import ?
It works with me with the following imports
import "#blueprintjs/table/lib/css/table.css";
import "#blueprintjs/icons/lib/css/blueprint-icons.css";
The full code for the component is
import React, { Component } from 'react';
class TestComponent extends Component {
render() {
return (
<div className="bp3-input-group modifier">
<span className="bp3-icon bp3-icon-filter" />
<input
type="text"
className="bp3-input modifier"
placeholder="Filter histogram..."
/>
</div>
);
}
}
export default TestComponent;
I got the following output
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/>