I am trying to load an image to a react web app. Here is the code.
export default function Card(props) {
return (
<div className="card">
<img src={`./${props.img}`} alt="Ngong hills image" className="card--image" />
<div className="card-stats">
<img src={Star} className="card--star" />
<span>5.0</span>
<span className="gray">(6) • </span>
<span className="gray">KEN</span>
</div>
<p>Visit Ngong with Stephen Muchendu</p>
<p>
<span className="bold">From $100</span>
</p>
</div>
);
}
However, the image does not load. What could be the problem?
export default function Card(props) {
return (
<div className="card">
<img src={props.img} alt="Ngong hills image" className="card--image" />
<div className="card-stats">
<img src={Star} className="card--star" />
<span>5.0</span>
<span className="gray">(6) • </span>
<span className="gray">KEN</span>
</div>
<p>Visit Ngong with Stephen Muchendu</p>
<p>
<span className="bold">From $100</span>
</p>
</div>
);
}
Related
I deployed my Vite React site on Netlify but my skill icons aren't rendered!!
Here's the site..
I did execute npm run build before deploying, I got the dist folder and deployed that on Netlify.
But at first the assets folder didn't had the icons so I added it in the assets (of dist folder) folder too, but no success!!
Please help.
I wanna render my skill icons of my portfolio site.
You need to move your assets directory into the public directory, and you need to remove ./src from the source path of the various img files. Something like:
{
id: 1,
icon: "/assets/html5.svg",
iconName: "HTML",
},
Referring to the Vite documentation You should put Your assets files into public folder directly.
Notice that:
You should always reference public assets using root absolute path -
for example, public/icon.png should be referenced in source code as
/icon.png.
folder&file structure:
Skills.jsx (icons)
import React from "react";
// import Skill from "./Skill";
function Skills() {
return (
<>
<section className="skills">
<div className="card">
<div className="content">
<img className="skillIcon" src="/html5.svg" alt="Icon" />
<p className="skillName">HTML</p>
</div>
<div className="content">
<img className="skillIcon" src="/css3.svg" alt="Icon" />
<p className="skillName">CSS3</p>
</div>
<div className="content">
<img className="skillIcon" src="/js.svg" alt="Icon" />
<p className="skillName">JavaScript</p>
</div>
<div className="content">
<img className="skillIcon" src="/react.svg" alt="Icon" />
<p className="skillName">ReactJs</p>
</div>
<div className="content">
<img className="skillIcon" src="/mongodb.svg" alt="Icon" />
<p className="skillName">MongoDB</p>
</div>
<div className="content">
<img className="skillIcon" src="/express.svg" alt="Icon" />
<p className="skillName">ExpressJs</p>
</div>
<div className="content">
<img className="skillIcon" src="/github.svg" alt="Icon" />
<p className="skillName">GitHub</p>
</div>
<div className="content">
<img className="skillIcon" src="/node.svg" alt="Icon" />
<p className="skillName">NodeJs</p>
</div>
<div className="content">
<img className="skillIcon" src="/password.svg" alt="Icon" />
<p className="skillName">Authentication</p>
</div>
<div className="content">
<img className="skillIcon" src="/api.svg" alt="Icon" />
<p className="skillName">API</p>
</div>
</div>
</section>
</>
);
}
export default Skills;
Intro.jsx (hero.gif)
import React from "react";
import hero from "/hero.gif";
function Intro() {
return (
<>
<main>
<section id="intro" className="hero">
<div className="heroText">
<p className="topData">Hey, I'm</p>
<h1 className="title">Shubham Pawar</h1>
<p className="heroData">I'm a MERN stack Developer.</p>
<button className="btn">Contact Me</button>
<button className="btn">Resume</button>
</div>
<div className="heroImg">
<img className="heroGif" src={hero} alt="hero img" />
</div>
</section>
</main>
</>
);
}
export default Intro;
Footer.jsx (icons)
import React from "react";
function Footer() {
return (
<>
<footer className="Footer">
<div className="footer-right">
<a href="#">
<img className="footerIcon" src="/linkedin2.png" alt="linkedIn" />
</a>
<a href="#">
<img className="footerIcon" src="/github2.png" alt="GitHub" />
</a>
<a href="#">
<img className="footerIcon" src="/instagram.png" alt="Instagram" />
</a>
<a href="#">
<img className="footerIcon" src="/twitter.png" alt="Twitter" />
</a>
</div>
<div className="footer-left">
<p className="footer-links">
<a className="link-1" href="#">
Home
</a>
About
Contact
</p>
<p>
#mjshubham21 Copyright © {new Date().getFullYear()} All Rights
Reserved.
</p>
</div>
</footer>
</>
);
}
export default Footer;
Output in browser:
I'm a beginner in React Js, and I'm using React Js with BootStrap 5.2.0
My product cards are not getting displayed in a row
I want to display 4 product cards in a row.
Adding Codes:
Home Page code:
<div className="container-fluid mb-2">
<Carousel />
<div className="mt-2">
<div className="row">
<div className="col-md-2">
<GetAllCategories />
</div>
<div className="col-md-10">
<div className="row row-cols-1 row-cols-md-4 g-4">
<div className="col">
{products.map((product) => {
return <ProductCard item={product} />;
})}
</div>
</div>
</div>
</div>
</div>
</div>
PRODUCT CARD CODE:
const ProductCard = (product) => {
return (
<div class="card border-color rounded-card card-hover product-card custom-bg">
<img
src={"http://localhost:8080/api/product/" + product.item.imageName}
class="card-img-top rounded mx-auto d-block m-2"
alt="img"
style={{
maxHeight: "270px",
maxWidth: "100%",
width: "auto",
}}
/>
<div class="card-body text-color">
<h5 class="card-title d-flex justify-content-between">
<div>
<b>{product.item.title}</b>
</div>
<CategoryNavigator
item={{
id: product.item.category.id,
title: product.item.category.title,
}}
/>
</h5>
<p className="card-text">
<b>{product.item.description}</b>
</p>
</div>
<div class="card-footer">
<div className="text-center text-color">
<p>
<span>
<h4>Price : ₹{product.item.price}</h4>
</span>
</p>
</div>
<div className="d-flex justify-content-between">
<Link
to={`/product/${product.item.id}/category/${product.item.category.id}`}
className="btn bg-color custom-bg-text"
>
Add to Cart
</Link>
<p class="text-color">
<b>
<i>Stock :</i> {product.item.quantity}
</b>
</p>
</div>
</div>
</div>
);
};
export default ProductCard;
From the past 4 days, I'm struggling to resolve this issue.
Please help me to fix this.
Thank You
You need to move <div className="col"> from home page to ProductCard as first element in return statement. Sample code at https://codesandbox.io/s/falling-thunder-swzukd
I have a problem. Link in component change Url in browser but not return component until i reload my browser.
I click product detail. Inside product detail have similar product.
I click on product details of similar products.
-> Browser Url update but it doesn't return product details until I reload the browser.
This is product in home:
<div className="col-md col-6">
<figure className="card-product-grid card-sm">
<Link to={`product-detail/${item.id}`} className="img-wrap item">
<img src={img_path + item.image} alt="null" />
</Link><div className="text-wrap p-3">{item.productName}
<span className="badge badge-danger"> {item.salePrice * 100 / item.price}
</span>
</div>
</figure>
</div>
This is similar product:
{productLike && productLike.length > 0 && productLike.map((item, index) => {
return <>
<Product key={index} id={item.id} image={item.image} productName={item.productName} detail={item.detail} price={item.price} />
This is Product component:
import React from "react";
import { Link } from "react-router-dom";
class Product extends React.Component {
render() {
var img_path = "http://localhost:8000/img/"
return (
<div class="col-md-3">
<figure class="card card-product-grid">
<div class="img-wrap">
<img src={img_path + this.props.image} alt="null" />
</div>
<figcaption class="info-wrap">
<h6 class="title" >{this.props.productName}</h6>
<Link to={`/product-detail/${this.props.id}`} class="title mb-2">{this.props.detail.indexOf('</') !== -1
? (
<div dangerouslySetInnerHTML={{ __html: this.props.detail.replace(/(<? *script)/gi, 'illegalscript') }} >
</div>
)
: this.props.detail
}</Link>
<div class="price-wrap">
<span class="price">{this.props.price}</span>
<small class="text-muted">/per bag</small>
</div>
<p class="mb-2"> 2 Pieces <small class="text-muted">(Min Order)</small></p>
<p class="text-muted ">Guangzhou Yichuang Electronic Co</p>
<hr />
<label class="custom-control mb-3 custom-checkbox">
<input type="checkbox" class="custom-control-input" />
<div class="custom-control-label">Add to compare
</div>
</label>
<i class="fa fa-envelope"></i> Contact supplier
</figcaption>
</figure>
</div>
);
}
}
export default Product;
Can someone help? Thank!
I just get started learning React, so I am sorry if I asked so basic question. I tried to solve this error message 'doesn't contain a default export(imported as 'Main') even though I write the bottom of the file export default Main. Could you check for me which part do I miss?
I will share my code below
import React, {Component} from "react";
import "./Main.css";
class Main extends Component {
render() {
return (
<div>
<div class="wrapper">
<div class="nav">
<p class="logo"> Westagram </p>
<input class="search-box" type="text" placeholder=" Search", style="font-family:Arial, FontAwesome" />
<div class="icons">
<img id="compass" src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/explore.png" />
<img id="heart" src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/heart.png" />
<img id="my-page" src=" https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/profile.png" />
</div>
</div>
<div class="main">
<div class="feeds">
<div class="article">
<div class="identi">
<img class="selfi" src="../src/images/about.png" />
<span class="name"> Jiwan Jeon </span>
<i class="fa fa-ellipsis-h" aria-hidden="true"></i>
</div>
<div class="pic">
<img src="../src/images/ucscPic.png" />
</div>
<div class="show-box">
<div class="reaction-icons">
<i class="fa fa-comment-o"></i>
<i class="fa fa-heart-o"></i>
<i class="fa fa-send-o"></i>
<i class="fa fa-bookmark-o"></i>
</div>
<div class="like-counts">
<span>like 4,000</span>
<div>
<div class="check-comments">
<span>UC Santa Cruz will continue to offer most courses remotely or online for spring and summer 2021, providing in-person instruction for a small</span>
<a id="space" href="">expanding</a><br />
Check the all comments
<ul class="feed-comments">
<li>test</li>
</ul>
</div>
</div>
<div class="comment">
<i class="fa fa-smile-o"></i>
<input class="user-input" type="text" placeholder="Add Comment..." />
<button class="post">Post</button>
</div>
</div>
</div>
<div class="main-right">
<div class="top">
<img class="selfi" src="../src/images/about.png" />
<div class="main-right-name">
<span id="eng-name">JiwanJeon94</span><br />
<span id="kr-name">전지완</span>
</div>
Transform
</div>
<div class="middle">
<div class="middle-words">
<span id="recommendation">Suggestions For You</span>
view all
</div>
<div class="recommendation-people">
<div id="recommendation-section1">
<img id="recommendation-people-selfi" src="../src/images/about.png" />
<span>Recommendation for you</span>
Follow
</div>
<div id="recommendation-section1">
<img id="recommendation-people-selfi" src="../src/images/about.png" />
<span>Recommendation for you</span>
Follow
</div>
<div id="recommendation-section1">
<img id="recommendation-people-selfi" src="../src/images/about.png" />
<span>Recommendation for you</span>
Follow
</div>
<div id="recommendation-section1">
<img id="recommendation-people-selfi" src="../src/images/about.png" />
<span>Recommendation for you</span>
Follow
</div>
<div id="recommendation-section1">
<img id="recommendation-people-selfi" src="../src/images/about.png" />
<span>Recommendation for you</span>
Follow
</div>
</div>
</div>
<div class="footer">
<div class="footer-top">
About
Help
press
API
Jobs
Privacy
Terms
Locations
TopAccounts
Hashtags
Language<br /><br />
</div>
<span>2021 INSTAGRAM FROM FACEBOOK</span>
</div>
</div>
);
}
}
export default Main;
I think you just need to make sure all of your html tags are closed correctly. E.g. with the .like-counts div, you are closing it with a <div> element rather than a </div>. Also make sure all of your line breaks are self closing. E.g. use <br /> rather than <br>. Opening the code in an editor like VS-code is quite helpful and will highlight some of the mistakes you've made.
I have a toggle example that I have done with Jquery before. Now I want to do it with react, but I don't know how.
I'm putting my Jquery code and React design code below.
React Design Code
Sidebar.js
`
import React from 'react';
import profileImage from '../../../assets/img/profil.jpg';
import iconImage from '../../../assets/img/icon.jpg';
import businessManImage from '../../../assets/img/business-man-white.svg';
import preferencessImage from '../../../assets/img/cogs-white.svg';
import logoutImage from '../../../assets/img/logout.svg';
import toggleImage from '../../../assets/img/toggle-icon.png';
import profileWhite from '../../../assets/img/profile-white.svg';
import classes from '../Sidebar/Sidebar.module.css';
const Sidebar = (props) => {
let url = ""
return (
<div>
<div className={classes['side-bar']}>
<div className={classes['side-bar-top']}>
<div className={classes['side-bar-icon']}>
<img src={iconImage} alt="profileresmi" />
</div>
</div>
<div className={classes['side-bar-row']} style={{height: '100px'}} >
<div className={classes['side-bar-icons']} style={{width: '100px'}} >
<div className={classes['side-bar-profile-image']}>
<img src={profileImage} alt="profileresmi" />
</div>
</div>
<div className={classes['side-bar-profile-content']}>
<h3><b>Mert EKİNCİ</b></h3>
<h4>mert#akturk.de</h4>
</div>
</div>
<div className={classes['side-bar-row']}>
<div className={classes['side-bar-icons']}>
<a href={url} className={classes['side-bar-elements-icons']}>
<img src={businessManImage} alt="profileresmi" />
</a>
</div>
<div className={classes['side-bar-text']}>
<a href={url}>Processes</a>
</div>
</div>
<div style={{ clear: 'both' }} ></div>
<div className={classes['side-bar-row']}>
<div className={classes['side-bar-icons']}>
<a href={url} className={classes['side-bar-elements-icons']}>
<img src={preferencessImage} alt="profileresmi" />
</a>
</div>
<div className={classes['side-bar-text']}>
<a href={url}>Preferences</a>
</div>
</div>
<div className={classes['side-bar-row']}>
<div className={classes['side-bar-icons']}>
<a href={url} className={classes['side-bar-elements-icons']}>
<img src={profileWhite} alt="profileresmi" />
</a>
</div>
<div className={classes['side-bar-text']}>
<a href={url}>User</a>
</div>
</div>
<div className={classes['side-bar-row']}>
<div className={classes['side-bar-icons']}>
<a href={url} className={classes['side-bar-elements-icons']}>
<img src={logoutImage} alt="profileresmi" />
</a>
</div>
<div className={classes['side-bar-text']}>
<a href={url}>Logout</a>
</div>
</div>
</div>
<div className={classes['side-toggle']}>
<span className={classes['side-bar-toggle']} >
<img src={toggleImage} alt="profileresmi" />
</span>
</div>
</div>
);
}
export default Sidebar;
`
Here I made the toggle by hiding and showing my divs.
Jquery Sidebar Toggle Code
Script.js
`
var isToggled = true;
var toggleDelay = 50;
var onclickSideToggle = function () {
isToggled = !isToggled;
toggleSidebar(isToggled);
};
$('#side-bar-toggle').on('click', onclickSideToggle);
var toggleSidebar = function (toggle) {
if (toggle) {
$('.side-bar-text').show(toggleDelay);
$('.side-bar-profile-content').show(toggleDelay);
} else {
$(".side-bar-text").hide(toggleDelay);
$('.side-bar-profile-content').hide(toggleDelay);
}
};
`
Can you give me some information on how to do it with React?
If you want just hide/show without any animation you can use the following approach.
More info about usage of useState hook you can find here: https://reactjs.org/docs/hooks-reference.html#usestate
import React, { useState } from 'react';
import profileImage from '../../../assets/img/profil.jpg';
import iconImage from '../../../assets/img/icon.jpg';
import businessManImage from '../../../assets/img/business-man-white.svg';
import preferencessImage from '../../../assets/img/cogs-white.svg';
import logoutImage from '../../../assets/img/logout.svg';
import toggleImage from '../../../assets/img/toggle-icon.png';
import profileWhite from '../../../assets/img/profile-white.svg';
import classes from '../Sidebar/Sidebar.module.css';
const Sidebar = props => {
const [isContentToggled, setIsContentToggled] = useState(true);
let url = ""
return (
<div>
<div className={classes['side-bar']}>
<div className={classes['side-bar-top']}>
<div className={classes['side-bar-icon']}>
<img src={iconImage} alt="profileresmi" />
</div>
</div>
<div className={classes['side-bar-row']} style={{height: '100px'}} >
<div className={classes['side-bar-icons']} style={{width: '100px'}} >
<div className={classes['side-bar-profile-image']}>
<img src={profileImage} alt="profileresmi" />
</div>
</div>
{isContentToggled && (
<div className={classes['side-bar-profile-content']}>
<h3><b>Mert EKİNCİ</b></h3>
<h4>mert#akturk.de</h4>
</div>
)};
</div>
<div className={classes['side-bar-row']}>
<div className={classes['side-bar-icons']}>
<a href={url} className={classes['side-bar-elements-icons']}>
<img src={businessManImage} alt="profileresmi" />
</a>
</div>
{isContentToggled && (
<div className={classes['side-bar-text']}>
<a href={url}>Processes</a>
</div>
)}
</div>
<div style={{ clear: 'both' }} ></div>
<div className={classes['side-bar-row']}>
<div className={classes['side-bar-icons']}>
<a href={url} className={classes['side-bar-elements-icons']}>
<img src={preferencessImage} alt="profileresmi" />
</a>
</div>
{isContentToggled && (
<div className={classes['side-bar-text']}>
<a href={url}>Preferences</a>
</div>
)}
</div>
<div className={classes['side-bar-row']}>
<div className={classes['side-bar-icons']}>
<a href={url} className={classes['side-bar-elements-icons']}>
<img src={profileWhite} alt="profileresmi" />
</a>
</div>
{isContentToggled && (
<div className={classes['side-bar-text']}>
<a href={url}>User</a>
</div>
)}
</div>
<div className={classes['side-bar-row']}>
<div className={classes['side-bar-icons']}>
<a href={url} className={classes['side-bar-elements-icons']}>
<img src={logoutImage} alt="profileresmi" />
</a>
</div>
{isContentToggled && (
<div className={classes['side-bar-text']}>
<a href={url}>Logout</a>
</div>
)}
</div>
</div>
<div className={classes['side-toggle']}>
<span onClick={() => setIsContentToggled(prevIsContentToggled => !prevIsContentToggled)} className={classes['side-bar-toggle']}>
<img src={toggleImage} alt="profileresmi" />
</span>
</div>
</div>
);
}
export default Sidebar;
If you want to toggle with the animation code will be almost the same.
You will need just to create some additional className like .hidden with styles for hidden elements and replace
{isContentToggled && (
<div className={classes['side-bar-profile-content']}>
<h3><b>Mert EKİNCİ</b></h3>
<h4>mert#akturk.de</h4>
</div>
)};
with adding/removing this className depending on the isContentToggled value.