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
Related
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'm trying to use Next.js Image component to render images on my app page. I'm having issues understanding how to select and update the main Image src so that I can replace it with all the responsive sizes Next.js creates for Image elements.
I have a list of navigation links in my app menu and I want to assign data attributes to each one so that when these links are hovered over they update the main Image element and display a different main image for each link hovered over.
I'm new to React and the way it works, so I'm not sure what my issues are but I have made a start with some basic concepts. I have started to console log the data I have to see what I get but now I've hit a brick wall.
Here is what I have so far:
import React, { useState, useEffect, useRef } from 'react';
import Image from 'next/image';
function Header() {
const MenuHeroImg = useRef();
function handleMouseEnter(e) {
console.log(e.target.getAttribute('data-project-image-url'));
console.log(MenuHeroImg.current);
}
return (
<>
<ul>
<li
onMouseEnter={handleMouseEnter}
data-project-image-url="/public/images/projects/image_2.png"
className={`${navigationStyles['c-navigation-menu-link']}`}>
<Link href="/project-link-here">Link</Link>
</li>
<li
onMouseEnter={handleMouseEnter}
data-project-image-url="/public/images/projects/image_3.png"
className={`${navigationStyles['c-navigation-menu-link']}`}>
<Link href="/project-link-here_2">Link</Link>
</li>
<ul>
<picture ref={MenuHeroImg}>
<Image
src="/public/images/projects/image_1.png"
alt="Image"
width={660}
height={835}
layout="responsive"
/>
</picture>
</>
);
}
export default Header;
Console Log:
Rather than using data-* attributes to set the images paths, move the image source into a state variable that you can then update when each onMouseEnter gets triggered.
Also note that images in the public folder are referenced as /images/projects/image_1.png, without the /public.
import React, { useState } from 'react';
import Image from 'next/image';
function Header() {
const [image, setImage] = useState('/images/projects/image_1.png');
function handleMouseEnter(imagePath) {
return () => {
setImage(imagePath);
};
}
return (
<>
<ul>
<li
onMouseEnter={handleMouseEnter('/images/projects/image_2.png')}
className={`${navigationStyles['c-navigation-menu-link']}`}
>
<Link href="/project-link-here">Link</Link>
</li>
<li
onMouseEnter={handleMouseEnter('/images/projects/image_3.png')}
className={`${navigationStyles['c-navigation-menu-link']}`}
>
<Link href="/project-link-here_2">Link</Link>
</li>
<ul>
<Image
src={image}
alt="Image"
width={660}
height={835}
layout="responsive"
/>
</>
);
}
export default Header;
the src should be like this:/images/projects/image_1.png;
because nextjs look for the image in the root folder that is the public folder
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" />
Setup
I've loaded the Vanilla JS library lightgallery.js through NPM and importing it as normal.
Issue
I'm initializing this library through componentDidMount(), but it's failing to compile because 'lightGallery' is not defined. see sample below
I verified the library is importing by removing componentDidMount() and initializing it through the Chrome Console. When I do this, it works as intended.
I'm not clear on why it's resulting in 'lightGallery' is not defined when the import clearly works when i don't initialize it with componentDidMount(). I'm guessing it's either an issue with the elements not being present in the DOM at load or it's an issue with the way my import is setup.
Any help would be appreciated.
Current Page
This is a stripped down version of my setup with the gallery elements hardcoded for easy explanation.
import React, { Component } from 'react';
import 'lightgallery.js';
class Gallery extends Component {
componentDidMount() {
lightGallery(document.getElementById('lightgallery'));
}
render() {
return (
<>
<section>
<h1>Gallery</h1>
</section>
<section>
<div id="lightgallery">
<a href="img/img1.jpg">
<img src="img/thumb1.jpg" />
</a>
<a href="img/img2.jpg">
<img src="img/thumb2.jpg" />
</a>
<a href="img/img3.jpg">
<img src="img/thumb3.jpg" />
</a>
</div>
</section>
</>
);
}
}
export default Gallery;