Hello guys I downloaded a template and I'm using its the home page to create a website using reactJs,
I created a class component then I transformed the code from HTML to JSX.
The home page contains a slider with 3 images I created a slider but the images are not showing can you please help meto fix this?
this is the code
import React, {Component} from "react";
import '../assets/styles/style.css';
import '../assets/styles/style-rtl.css';
import Slider from "react-slick";
import img1 from "../assets/images/image_header_04.jpg";
import img2 from "../assets/images/image_header_03.jpg";
import img3 from "../assets/images/image_news_05.jpg"
class Home extends Component
{
render()
{
const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true
};
return(
<main className="main">
{/* Slider */}
<section className="intro-slider ltr section-rounding">
<div className="intro-slider__image swiper-container overlay">
<div className="swiper-wrapper">
<Slider {...settings}>
{/* Image 1 */}
<div className="swiper-slide">
<div className="coverSlider js-parallax js-image" data-image={img1} />
</div>
{/* Image 2 */}
<div className="swiper-slide">
<div className="coverSlider js-parallax js-image" data-image={img2} />
</div>
{/* Image 3 */}
<div className="swiper-slide">
<div className="coverSlider js-parallax js-image" data-image={img3} />
</div>
</Slider>
</div>
</div>
</section>
{/* /Slider */}
</main>
);
}
}
export default Home;
In order to display the images correctly on React, you need to replace the div tags you have for an tag.
Replace this:
<div className="swiper-slide">
<div className="coverSlider js-parallax js-image" data-image={img1} />
</div>
For this;
<img src={img1} alt="image description" />
Related
I used default create-react-app to create a react app. However, when i try to add cards that contain pictures my image does not render. I get a white screen....
My image is located in a folder in src called Images. The rest works until I add in the Card prop and then the screen goes fully white. So I suppose that means it is not working or rendering properly.
import React from 'react';
export default function Card(props) {
return (
<div className="card">
<img src={require("./Images/monstera.jpeg")} alt="monstera"></img>
<div className="card-stats">
<p>{props.name}</p>
<p>{props.price}</p>
</div>
</div>
)
}
import logo from './logo.svg';
import './App.css';
import React from 'react';
import Header from './Components/Header';
import Inventory from './Components/Inventory';
import Cart from './Components/Cart';
import data from './data';
import Card from './Components/Card';
function App() {
return (
<div className="App">
<Header></Header>
<div className="row">
<Inventory>
<div className="cards-list">
<Card>
</Card>
</div>
</Inventory>
<Cart></Cart>
</div>
</div>
);
}
export default App;
Is there something I am doing wrong? Is there a special way to render a react app with an image?
look for any error through console and try cleaning your code a little
turn this
function App() {
return (
<div className="App">
<Header></Header>
<div className="row">
<Inventory>
<div className="cards-list">
<Card>
</Card>
</div>
</Inventory>
<Cart></Cart>
</div>
</div>
);
}
export default App;
into this
function App() {
return (
<div className="App">
<Header />
<div className="row">
<Inventory />
<div className="cards-list">
<Card />
</div>
<Cart />
</div>
</div>
);
}
export default App;
if not required don't use so many div
I am using the react-responsive-carousel library to have a carousel.
everything works fine, the problem occurs when I do a swipe up and swipe down the carousel moves (see the image):
I only need it to move when I do a swipe left or swipe right.
How can I avoid the swipe up and swipe down?
This is my live code:
https://codesandbox.io/s/crazy-nova-5hf06u
this is my code:
import "./styles.css";
import ReactDOM from "react-dom";
import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
import { Carousel } from "react-responsive-carousel";
export default function App() {
return (
<Carousel
showThumbs={false}
showStatus={false}
showIndicators={false}
showArrows={false}
emulateTouch={true}
axis="horizontal"
>
<div>
<img src="https://im.indiatimes.in/content/2017/Nov/in6_1509613195.jpg" />
</div>
<div>
<img src="https://im.indiatimes.in/content/2017/Nov/in6_1509613195.jpg" />
</div>
<div>
<img src="https://im.indiatimes.in/content/2017/Nov/in6_1509613195.jpg" />
</div>
<div>
<img src="https://im.indiatimes.in/content/2017/Nov/in6_1509613195.jpg" />
</div>
<div>
<img src="https://im.indiatimes.in/content/2017/Nov/in6_1509613195.jpg" />
</div>
<div>
<img src="https://im.indiatimes.in/content/2017/Nov/in6_1509613195.jpg" />
</div>
</Carousel>
);
}
You can use preventMovementUntilSwipeScrollTolerance prop with swipeScrollTolerance={100}.
I'm building a website by react and my local image doesn't display. I use props to pass the properties from Cards.js to CardItem.js then every properties display except image. I don't know what is a problem with my code :(
Here is Cards.js:
import React from 'react'
import CardItem from './CardItem'
import './Cards.css'
function Cards() {
return (
<div className="cards">
<h1>Check out these EPIC Destinations!</h1>
<div className="cards-container">
<div className="cards-wrapper">
<ul className="cards-items">
<CardItem
src='../assets/images/img-9.jpg'
text='Explore the hidden waterfall deep inside the Amazon Jungle'
label='Adventure'
path='/sevices'
/>
</ul>
</div>
</div>
</div>
)
}
export default Cards
CardItem.js:
import React from 'react'
import { Link } from 'react-router-dom'
function CardItem(props) {
return (
<>
<li className="cards-item">
<Link className="cards-item-link" to={props.path}>
<figure className="cards-item-pic-wrap" data-category={props.label}>
<img src={props.src} alt="Travel Img" className="cards-item-img" />
</figure>
<div className="cards-item-info">
<h5 className="cards-item-text">{props.text}</h5>
</div>
</Link>
</li>
</>
)
}
export default CardItem
we want to import the image first
import img from './assets/images/img-9.jpg';
We named image as img use it in your code.
import React from 'react'
import CardItem from './CardItem'
import './Cards.css'
import img from './assets/images/img-9.jpg';
function Cards() {
return (
<div className="cards">
<h1>Check out these EPIC Destinations!</h1>
<div className="cards-container">
<div className="cards-wrapper">
<ul className="cards-items">
<CardItem
src={img}
text='Explore the hidden waterfall deep inside the Amazon Jungle'
label='Adventure'
path='/sevices'
/>
</ul>
</div>
</div>
</div>
)
}
export default Cards
first import image
import img from '../assets/images/img-9.jpg'
then use it
<CardItem src={img} .../>
I hope this helps you, resources https://create-react-app.dev/docs/using-the-public-folder/:
for Cards.js file:
...
<CardItem
src='/images/img-9.jpg'
text='Explore the hidden waterfall deep inside the Amazon Jungle'
label='Adventure'
path='/services'
/>
And...
for CardItem.js file:
...
<img
className='cards__item__img'
alt='Travel'
src={process.env.PUBLIC_URL + props.src}
/>
I am unable to load images despite of correct src given can anyone tell silly mistake in it!
I am absolute noobie so what is thing I am doing wrong ? in react img tag <img src={} /> this how i think codes are written in it!
Template.js Code
import React from 'react';
import './Template.css';
function Template () {
return (
<div>
<div className="shape header-shape-one">
<img src={"./shape1.jepg"} alt="shape"></img>
</div>
<div className="shape header-shape-tow animation-one">
<img src={"./shape2.png"} alt="shape"></img>
</div>
<div className="shape header-shape-three animation-one">
<img src={"./shape1.jepg"} alt="shape"></img>
</div>
<div className="shape header-shape-fore">
<img src={"./shape4.png"} alt="shape"></img>
</div>
</div>
);
}
export default Template;
App.js Code
import React from 'react';
import NAVBAR from './components/Navbar/navbar';
import Template from './components/shape/Template'
class App extends React.Component
{
render()
{
return (
<div>
<Template />
<NAVBAR />
</div>
);
}
}
export default App;
Create a folder inside the public folder called images and move all your images there. Then, when referencing the path for your images do it like this: <img src="./images/shape1.jpg" alt="shape" />
I am trying to add links to my font-awesome react component.
<div>
<FontAwesomeIcon icon={faHome} size="2x" />
<div>
The component above renders the faHome icon.
But when I add anchor tag around it, it does not render. I can still see that the component in inspector tools with <svg> tag also loaded the same way when I didn't have anchor tag in the first example.
<div>
<a href="https://www.youtube.com/c/jamesqquick">
<FontAwesomeIcon icon={faHome} size="2x" />
</a>
</div>
it is working perfectly. Please check the below code:
import React from "react";
import "./styles.css";
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
import { faHome } from "#fortawesome/free-solid-svg-icons";
export default function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<div>
<a href="https://www.youtube.com/">
<FontAwesomeIcon icon={faHome} size="2x" />
</a>
</div>
</div>
);
}
Here is the Code Sandbox
Here is output