I'm following along with a Scrimba tutorial on React and I'm doing it on my own machine locally.
I have an image in my images folder within my src folder.
In my components folder I have a component called Card which is shown but why is my image only shown when I import it and not like the other two ways which are commented out?
Might be something stupid but I can't see it. Thanks all.
Just for clarity everything else works bar the image tags commented out.
App.js
function App() {
return (
<div>
<Navbar />
<Hero />
<Card
img="katie-zaferes.png"
rating="5.0"
reviewCount="6"
country="USA"
title="Life Lessons With Katie Zaferes"
price={136}
/>
</div>
);
}
Card.js
import Star from "../images/star.png";
import Athlete from "../images/katie-zaferes.png";
const Card = (props) => {
return (
<div className="card">
<img src={Athlete} alt="card-image" />
{/* <img src="../images/katie-zaferes.png" alt="img" /> */}
{/* <img src={`../images/${props.img}`} alt="card-image" /> */}
<div className="card--stats">
<img src={Star} alt="star" className="card--star" />
<span>{props.rating}</span>
<span className="gray">{props.reviewCount} •</span>
<span className="gray">{props.country}</span>
</div>
<p>{props.title}</p>
<p>
<b>From $ {props.price} </b> / person
</p>
</div>
);
};
export default Card;
I figured out it was an image path issue. I placed my 'images' folder in 'public'. I could then remove all imports and access them anywhere through '/images/example.png'.
Used in a component as shown below:
const Card = (props) => {
return (
<div className="card">
<img src={`/images/${props.img}`} alt="card" />
<div className="card--stats">
<img src="/images/star.png" alt="star" className="card--star" />
<span>{props.rating}</span>
<span className="gray">{props.reviewCount} • </span>
<span className="gray">{props.country}</span>
</div>
<p>{props.title}</p>
<p>
<b>From $ {props.price} </b> / person
</p>
</div>
);
};
export default Card;
If you cant put the 'images' folder in 'public' because create-react-app doesn't let you, put your path as a string literal inside a required function, it worked for me
const Card = (props) => {
return (
<div className="card">
<img src={require(`../images/${props.img}`)} alt="card" />
<div className="card--stats">
<img src="/images/star.png" alt="star" className="card--star" />
<span>{props.rating}</span>
<span className="gray">{props.reviewCount} • </span>
<span className="gray">{props.country}</span>
</div>
<p>{props.title}</p>
<p>
<b>From $ {props.price} </b> / person
</p>
</div>
);
};
export default Card;
This path works assuming you have your 'image' folder as a sibling to you 'component' folder
In the case of the image you are trying to show on your App.js, you are giving your Card component a wrong path to find your image, your app needs to know where to find your "katie-zaferes.png" image, so the right way should be:
<Card
img='../images/katie-zaferes.png'
...
/>
(I'm assuming that your App.js and your Card.js files are on the same folder, in case they're not, you have to modify the path to match your /images/katie-zaferes.png)
Note: By the way, for your next questions here in StackOverflow, try to write your code directly on your post, using the Javascript/HTML/CSS button, never use images because it makes more work for people to answer your question/
Related
Here’s my code in App.js
import React from “react”;
import Navbar from “./components/Navbar”
import Hero from “./components/Hero”
import Card from “./components/Card”
export default function App(){
return(
<div>
<Navbar />
<Hero />
<Card
img="./images/katie.png"
rating={5.0}
reviewcount={6}
country="usa"
title="Life lessons from Katie Zaferes"
price={138}
/>
</div>
)
}
and where I’m trying to pass the image into
import React from “react”
import star from “…/images/star.png”
export default function Card(props){
return(
<div className="div1">
<img src={`../images/${props.img}`} className="katie1"/>
<div className="card-stats">
<img src={star} className="card--star" />
<span>{props.rating}</span>
<span className="grey">({props.reviewcount}) </span>
<span className="grey">{props.country}</span>
</div>
<p>{props.title}</p>
<p>From ${props.price} / person</p>
</div>
)
}
Any ideas? I’ve tried moving the images folder to the public folder but react doesn’t seem to like that as I get an error message “images can’t be outside of the src folder”
you should import image and send imported image as props.
import imgSrc from "./images/katie.png";
send image as props:
<div>
<Navbar />
<Hero />
<Card
img={imgSrc}
rating={5.0}
reviewcount={6}
country="usa"
title="Life lessons from Katie Zaferes"
price={138}
/>
</div>
So I'm trying to use the href at the bottom to link to Twitter? When putting an atag I get an error. is there another function I can use?
Ps. what I'm trying to do is on my home page have a picture that when the user clicks on it redirects them to Twitter.
I looked at other questions but it is not the same as mine. mine is trying to put a href inside a function.
Just added m carditem.JS components as well. Thank you !
import React from "react";
import "./Cards.css";
import CardItem from "./CardItem";
import { Link } from "react-router-dom";
function Cards() {
return (
<div className="cards">
<h1>Lost Fantom Saga Projects</h1>
<div className="cards__container">
<div className="cards__wrapper">
<ul className="cards__items">
<CardItem
src="images/img-9.jpg"
text="Lost Fantom Warrios"
label="Warriors"
path="/services"
/>
<CardItem
src="images/img-2.jpg"
text="Lost Fantom Disciples"
label="Disciples"
path="/services"
/>
</ul>
<ul className="cards__items">
<CardItem
src="images/img-3.jpg"
text="Fantom Degens"
label="Degens"
path="/services"
/>
<CardItem
src="images/img-4.jpg"
text="Coming Soon"
label="Coming Soon"
path="/products"
/>
<CardItem
src="images/img-4.jpg"
text="Coming Soon"
label="Coming Soon"
href="https://twitter.com/LostFantomSaga/"
target="_blank"
/>
</ul>
</div>
</div>
</div>
);
}
export default Cards;
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
className='cards__item__img'
alt='Travel Image'
src={props.src}
/>
</figure>
<div className='cards__item__info'>
<h5 className='cards__item__text'>{props.text}</h5>
</div>
</Link>
</li>
</>
);
}
export default CardItem;
One simple approach that might suit your needs would be to use a <a> tag instead of the Link component.
Here's a quick and dirty CodeSandbox for how you could go about this, based on the code snippets you provided - https://codesandbox.io/s/lingering-sky-d4lz21?file=/src/CardItem.tsx. It demonstrates the ability to slightly alter the final render by using either props.path to use a Link component, or props.href to use a <a> tag (along with props.target for the target attribute).
Hey so i am trying to redirect to a external link like github instead of a path within the site,but I am having a problem.
Here Cards.js
import "./Cards.css";
import CardItem from "./CardItem";
function Cards() {
return (
<div className="cards">
<h1>Check out my portfolios!</h1>
<div className="cards__container">
<div className="cards__wrapper">
<ul className="cards__items">
<CardItem
src="images/img-9.jpg"
text="Explore my dribbble profile where underlying are my illustrations and more"
label="Adventure"
path="https://www.google.com/"
/>
<CardItem
src="images/img-2.jpg"
text="Travel through the Islands of Bali in a Private Cruise"
label="Luxury"
path="/services"
/>
</ul>
<ul className="cards__items">
<CardItem
src="images/img-3.jpg"
text="Set Sail in the Atlantic Ocean visiting Uncharted Waters"
label="Mystery"
path="/services"
/>
<CardItem
src="images/img-4.jpg"
text="Experience Football on Top of the Himilayan Mountains"
label="Adventure"
path="/products"
/>
<CardItem
src="images/img-8.jpg"
text="Ride through the Sahara Desert on a guided camel tour"
label="Adrenaline"
path="/sign-up"
/>
</ul>
</div>
</div>
</div>
);
}
export default Cards;
So what i am trying to do instead of that path i am using href and a external link but its showing localhost/https:github.com like link instead of me redirected to the actual site.
also here is the
Carditeam.js
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
className="cards__item__img"
alt="Travel Image"
src={props.src}
/>
</figure>
<div className="cards__item__info">
<h5 className="cards__item__text">{props.text}</h5>
</div>
</Link>
</li>
</>
);
}
export default CardItem;
So looking at these two codes what is that i can do to redirect on to a external link instead of a path
i know their is something to be change or twicked in the Carditeam.js for this so sharing it.
The <Link> tag is used to route to views inside your application when using the react-router.
You need an if statement in CardItem so that if props.path is an external link you render an <a class="cards__item__link" href={props.path}>, if it isn't you can render <Link className="cards__item__link" to={props.path}>
the component Link of react-router-dom is for navigation in your application.
You can use <a className="cards__item__link" href={props.path}></a>
But if this CardItem is for internal navigation,
You use Link
So, you can add 1 more props in CardItem
Ex: external
import { Link } from "react-router-dom";
function CardItem(props) {
return (
<>
<li className="cards__item">
{
props.external
?
(
<a className="cards__item__link" href="">
<figure className="cards__item__pic-wrap" data-category="">
<img className="cards__item__img" alt="Travel Image TRUE" src="" />
</figure>
<div className="cards__item__info">
<h5 className="cards__item__text">"TRUE"</h5>
</div>
</a>
)
:
(
<h1 className="cards__item__link">
<figure className="cards__item__pic-wrap" data-category="">
<img className="cards__item__img" alt="Travel Image" src="" />
</figure>
<div className="cards__item__info">
<h5 className="cards__item__text">"BLA"</h5>
</div>
</h1>
)
}
</li>
</>
);
}
export default CardItem;
I have been trying to use material-ui and iterate over it inside an array ( for creating ratings for some items like in e-commerce sites). The code isn't working. On my localhost server, it's not showing any stars at all. Before I made it dynamic, it was working all fine, then I added props to my functional component as per to make it dynamic. Everything else is working just fine except that it's not accepting my matrial-ui icon inside the array for me to iterate over. Moreover, the import statement says "it's value is never read although it's imported"
My code: Product.js:
import React from "react";
import "./Product.css";
import StarRateIcon from "#material-ui/icons/StarRate";
function Product({ id, title, image, price, rating }) {
return (
<div className="product">
<div className="product_info">
<p>{title}</p>
<p className="product_price">
<small>$</small>
<strong>{price}</strong>
</p>
<div className="product_rating">
{Array(rating)
.fill()
.map((_, i) => (
<p StarRateIcon className="star" />
))}
</div>
</div>
<img src={image} alt="" />
<button>Add to Basket</button>
</div>
);
}
export default Product;
My home.js file :
import React from "react";
import "./Home.css";
import Product from "./Product";
function Home() {
return (
<div classname="home">
<div className="home_container">
<img
className="home_image"
src="https://m.media-amazon.com/images/G/01/digital/video/sonata/US3P_JOKER_IMAGE_ID/be07783e-2738-4aaf-b90c-d0ec474d15ae._UR3000,600_SX1500_FMwebp_.jpg"
/>
<div className="home_row">
<Product
id="890778"
title="Description"
price={99.99}
image="https://m.media-amazon.com/images/I/71BGLa7IFtL._AC_UY218_.jpg"
rating={5}
/>
<Product />
</div>
</div>
</div>
);
}
export default Home;
Help Somebody! I can use emoji snippets but I really want this to work. I have imported StarRateIcon and used it. It isn't working.
Looks like you accidentally put a 'p' in front of your icon component name. You have <p StarRateIcon className="star" /> when it should be <StarRateIcon className="star" />
You're rendering a p tag with no content with an invalid attribute, StarRateIcon. It's the reason you're not seeing anything rendered. If you inspect the HTML, you'll most likely see the p tags. You may also see errors in the console about invalid attributes. Your code should look something like this:
Array(rating).fill().map(() => <StarRateIcon className="star" />)
class App extends Component {
render(){
return (
<div className="App">
<MuiThemeProvider>
<div>
<GridList cellHeight={100}>
{this.props.data.map((cat) => (
<GridTile key={cat.photo} title={cat.title}>
{console.log(cat.photo)}
<img src={cat.photo} alt={cat.photo}/>
</GridTile>))}
<GridTile key="wiam.jpg" title="joijoiji">
<img src="wiam.jpg"/>
</GridTile>
</GridList>
</div>
</MuiThemeProvider>
</div>
);
}
}
"wiam.jpg" is a picture that I copied in my entire project folder, yet it doesn't display, but when I use an absolute link to a picture on a external website, I have no issue.
Where am I supposed to put the image on my server for it to appear ?
I had a similar problem. Images in material-ui components are distributed from the "public" directory. So if you have /public/images/wiam.jpg, src="images/wiam.jpg" should display the image correctly.