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}
/>
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 Create a component and it doesn't render (react js) < --- completely newbie react js user
first i create well structure of a card in list
meetupitems.js
import { Action } from 'history';
import css from './Meetupitems.module.css';
function Meetupitem(props) {
<li className={css.item}>
<div className={css.image}>
<image src={props.image} alt={props.title} />
</div>
<div className={css.content}>
<h3>{props.title}</h3>
<address>{props.address}</address>
<p>{props.description}</p>
</div>
<div className={css.actions}>
<button></button>
</div>
</li>;
}
export default Meetupitem;
then use map() to create card list from "list of data"
Meetuplist.js
import Meetupitem from "./Meetupitems";
import css from "./Meetuplist.module.css";
function Meetuplist(props) {
return (
<ul className={css.list}>
{props.meetups.map((meetup) => (
<Meetupitem
key={meetup.id}
title={meetup.title}
image={meetup.image}
address={meetup.address}
description={meetup.description}
/>
))}
</ul>
);
}
export default Meetuplist;
and when i'm trying to use it
Allmeetup.js
import Meetupitem from "./Meetupitems";
import css from "./Meetuplist.module.css";
function Meetuplist(props) {
return (
<ul className={css.list}>
{props.meetups.map((meetup) => (
<Meetupitem
key={meetup.id}
title={meetup.title}
image={meetup.image}
address={meetup.address}
description={meetup.description}
/>
))}
</ul>
);
}
export default Meetuplist;
the result I saw was a blank page at the index route(where the list should show)
but others route was fine
I can't figure out what's wrong
I think the issue is nothing is being returned from your Meetupitem component. There is no return statement in it.
I believe if you look in console in chrome dev tools, you will be able to see the error messages for it.
Try changing it to as shown below:
import { Action } from 'history';
import css from './Meetupitems.module.css';
function Meetupitem(props) {
return (
<li className={css.item}>
<div className={css.image}>
<image src={props.image} alt={props.title} />
</div>
<div className={css.content}>
<h3>{props.title}</h3>
<address>{props.address}</address>
<p>{props.description}</p>
</div>
<div className={css.actions}>
<button></button>
</div>
</li>;
)
}
export default Meetupitem;
I have a JS file; Cards.js which implements a card-style div:
import React from "react";
import CardItem from "./CardItem";
import "./Cards.css";
function Cards() {
return (
<div classNam="cards">
<ul className="cards__items">
<CardItem
src={require("../images/img-9.jpg").default}
text="text"
label="label"
path="/jobs"
/>
</ul>
</div>
);
}
export default Cards;
And then CardItem.js:
import React from "react";
import { Link } from "react-router-dom";
function CardItem(props) {
return (
<div>
<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}
className="card__item__img"
alt="alt"
/>
</figure>
<div className="cards__item__info">
<h5 className="cards__item__text">{props.text} </h5>
</div>
</Link>
</li>
</div>
);
}
export default CardItem;
However, on my site, the images from CardItem are not displayed. The Text, Label and Path all work, but no image.
I've looked around and have seen different solutions to this issue but none have worked for me.
I've tried using
src="../images/img-9.jpg"
instead of using require but that also didn't work.
What's weird is I can see the path AND the preview of the image when looking at the Chrome inspection panel, but they won't load.
I've also tried putting the images folder in the Public directory which is another solution I've seen, but I get an error saying something about loading resources outside of /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" />