I have followed the demo code and all works well except thumbnails. I set it to true so I can see 'ul' for the thumbnails in html, but it does not have any image src.
Here is the code below.
import React from 'react';
import { Carousel } from 'react-responsive-carousel';
import 'react-responsive-carousel/lib/styles/carousel.min.css';
import Image from 'next/image';
const Banner = ({ carousel, isDifferent, className }) => {
return (
<div>
<Carousel autoPlay infiniteLoop showThumbs>
{carousel.length !== 0 &&
carousel?.map((item, idx) => (
<div className={`relative w-full ${className} cursor-pointer`} key={idx}>
<Image src={isDifferent ? item?.node?.mediaItemUrl : item.node.bannerInfo.bannerImage.mediaItemUrl} alt="banner" objectPosition="center top" layout="fill" objectFit="cover" priority />
</div>
))}
</Carousel>
</div>
);
};
export default Banner;
This is how I use Banner component
<Banner carousel={product.galleryImages.edges} isDifferent className="md:hidden h-[400px]" />
When I check on the development tool, I see the ul.
Please let know what I am missing.
If not using the img html element directly you need to render the thumbnails with renderThumbs
example:
renderThumbs={() =>
mThumbnails.map((thumbnail) => (
<Image src={thumbnail.src} alt={thumbnail.alt} key={thumbnail.src} />
))
}
Related
I created my own blog with gatsby and contentful using template. And I was tring to change subdirctory of my arcticels. article URLs are working now but links in index page is not working.
import React from 'react'
import { Link } from 'gatsby'
import { GatsbyImage } from 'gatsby-plugin-image'
import Container from './container'
import Tags from './tags'
import * as styles from './article-preview.module.css'
const ArticlePreview = ({ posts }) => {
if (!posts) return null
if (!Array.isArray(posts)) return null
return (
<Container>
<ul className={styles.articleList}>
{posts.map((post) => {
return (
<li key={post.slug}>
<Link to={`/${post.category}/${post.slug}`} className={styles.link}>
<GatsbyImage alt="" image={post.heroImage.gatsbyImageData} />
<h2 className={styles.title}>{post.title}</h2>
</Link>
<div
dangerouslySetInnerHTML={{
__html: post.description.childMarkdownRemark.html,
}}
/>
<div className={styles.meta}>
<small className="meta">{post.publishDate}</small>
<Tags tags={post.tags} />
</div>
</li>
)
})}
</ul>
</Container>
)
}
export default ArticlePreview
I changed to <Link to={/${post.category}/${post.slug}} from <Link to={/${post.slug}}. but somehow links are like http://localhost:8000/undefined/(article-slug). It shold be category name as I set up in Comtentful insted of 'undefined'.
do you have any suggestions?
if I use subdir like /blog/, its working. and Link to={/${post.slug}/${post.slug}} also work.
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 new to reactjs in this i have defined components and i am passing title to audio cards and by using title i am also defining source of the audio files. and after clicking on that particular component i want to play that particular audio file.
in js we can achieve this using $(this).find();
but in reactjs how to do it can anyone help me
import React from 'react';
import AudioCard from './AudioCard';
import '../css/RecommendedAudios.css';
function RecommandedAudios() {
return (
<div className="recommandedaudios">
<h2>Recommanded</h2>
<div className="recommandedaudios_audios">
<AudioCard title="Arrows to Athens - Alive" />
<AudioCard title="Arrows to Athens - Dust & Gold" />
<AudioCard title="Arrows to Athens - Stars" />
<AudioCard title="Arrows to Athens - Used to be" />
<AudioCard title="Bryan Adams - Here I am" />
<AudioCard title="My Heart Belongs to You" />
<AudioCard title="Ravenscode - My Escape" />
</div>
</div>
);
}
export default RecommandedAudios;
import React from 'react';
import '../css/AudioCard.css';
import PlayArrowIcon from '#material-ui/icons/PlayArrow';
function AudioCard({ title, timestamp }) {
var playsong = () => {
const select = document.querySelector("audio");
select.play();
};
return (
<div onClick={playsong} className="audiocard">
<PlayArrowIcon />
<div className="audiocard_info">
<div className="audiocard_title">
<h5>{title}</h5>
<audio src={require(`../sounds/${title}.mp3`)}></audio>
</div>
</div>
</div>
);
}
export default AudioCard;
document.querySelector("audio") will return the first "audio" tag in the HTML, not the specific one you're looking for
you can use ref:
import React, { useRef } from 'react'
function AudioCard({ title, timestamp }) {
const audioEl = useRef(null);
const playsong = () => audioEl.current.play();
return (
<div onClick={playsong} className="audiocard">
<PlayArrowIcon />
<div className="audiocard_info">
<div className="audiocard_title">
<h5>{title}</h5>
<audio ref={audioEl} src={require(`../sounds/${title}.mp3`)}></audio>
</div>
</div>
</div>
);
}
You can use react-audio-player instead of using query selector and HTML audio tag
you can install it by
npm install --save react-audio-player
and inport the library to your code and use
import ReactAudioPlayer from 'react-audio-player';
const [audio,ReferAudio] = useState()
...........
<div onClick={playsong} className="audiocard">
<PlayArrowIcon />
<div className="audiocard_info">
<div className="audiocard_title">
<h5>{title}</h5>
<ReactAudioPlayer
src={require(`../sounds/${title}.mp3`)}
controls
ref={(e) => { ReferAudio(e) }}
/>
</div>
</div>
</div>
you can access the player by using audio
you can lern more here
I am using react reveal and doing an image slide up transition but the image is not showing, I have given the code below as well as the output image. I have added a picture which shows whats happening. the link in the picture was supposed to be an image but it's showing just Link
import React from 'react';
import { Link } from 'react-router-dom';
import Reveal from 'react-reveal';
import 'animate.css/animate.css';
const generateBlocks = ({blocks}) =>{
if(blocks){
return blocks.map((item)=>{
const styles = {
background:`url('/images/blocks/${item.image}') no-repeat `
}
return(
<Reveal key={item.id} effect="animated fadeInUp"
className={`item ${item.type}`}>
<div className="veil"></div>
<div
className="image"
style={styles} >
</div>
<div className="title">
<Link to={item.link}>{item.title}</Link>
</div>
</Reveal>
)
})
}
}
const Blocks = (props) =>{
return(
<div className ="home_blocks">
{generateBlocks(props)}
</div>
)
}
export default Blocks;][1]
Heve you tried to import the right component from Reveal:
import Reveal from 'react-reveal/Reveal';
Have a look into the Documentation: https://www.react-reveal.com/examples/common/custom/
This is my first time trying to use Meteor with ReactJs and React Semantic UI, and having issues on rendering the Semantic UI modal. What I am trying to achieve is to click on the button and open up the modal overlaying on the whole browser, in reference to the React Semantic Modal Manual But what I have right now is that the modal is rendered partially on the screen, as seen from the attached screenshots. Can anyone please help? Thanks in advance.
Main.js
import {Meteor} from 'meteor/meteor';
import React from 'react';
import ReactDOM from 'react-dom';
import {routes} from "../imports/routes/routes";
Meteor.startup(() => {
ReactDOM.render(routes, document.getElementById('app'));
});
Site.js:
import React from 'react';
import { Header, Button, Modal } from 'semantic-ui-react';
import PrivateHeader from './PrivateHeader';
import Sidebar from './Sidebar';
import ModalExample from './Modal';
export class Site extends React.Component {
render() {
return (
<div>
<PrivateHeader/>
<Sidebar/>
<div className="page">
<div className="ui padded one column grid">
<div className="column">
<ModalExample/>
</div>
</div>
</div>
</div>
);
}
}
export default Site;
ModalExample.js
import React from 'react'
import { Button, Header, Icon, Modal } from 'semantic-ui-react'
const ModalBasicExample = () => (
<Modal trigger={<Button>Basic Modal</Button>} basic size='fullscreen'>
<Header icon='archive' content='Archive Old Messages' />
<Modal.Content>
<p>Your inbox is getting full, would you like us to enable automatic archiving of old messages?</p>
</Modal.Content>
<Modal.Actions>
<Button basic color='red' inverted>
<Icon name='remove' /> No
</Button>
<Button color='green' inverted>
<Icon name='checkmark' /> Yes
</Button>
</Modal.Actions>
</Modal>
)
export default ModalBasicExample
Sidebar.js
export const Sidebar = (props) => {
return (
<div className="ui inverted vertical left fixed menu" >
<a className="item" href="/">
<img src='/images/logo.png' className="ui mini right spaced image"/>
Semantics UI Test
</a>
<div className="item">
<div className="header">Hosting</div>
<div className="menu">
<a className="item">Shared</a>
<a className="item">Dedicated</a>
</div>
</div>
<div className="item">
<div className="header">Support</div>
<div className="menu">
<a className="item">E-mail Support</a>
<a className="item">FAQs</a>
</div>
</div>
</div>
)
};
export default Sidebar;
Thanks to Saad's comment mentioning the className that I found out that it was due to Semantic UI will add a ui page modals dimmer transition visible active className when the modal is opened. This causes a conflict to my existing page className which is used in other pages, but because of Meteor and React, the various scss are compressed together.
I suggest to run this.show('fullscreen') with an onClick event on trigger button like the following :
<Button onClick={this.show('fullscreen')}>Show Modal</Button>
ModalExample.js
import React, { Component } from 'react'
import { Button, Modal } from 'semantic-ui-react'
class ModalExample extends Component {
state = { open: false }
show = size => () => this.setState({ size, open: true })
close = () => this.setState({ open: false })
render() {
const { open, size } = this.state
return (
<div>
<Button onClick={this.show('fullscreen')}>Show Modal</Button> // Triggering button
<Modal size={size} open={open} onClose={this.close}>
<Modal.Header>
Delete Your Account
</Modal.Header>
<Modal.Content>
<p>Are you sure you want to delete your account</p>
</Modal.Content>
<Modal.Actions>
<Button negative>
No
</Button>
<Button positive icon='checkmark' labelPosition='right' content='Yes' />
</Modal.Actions>
</Modal>
</div>
)
}
}
export default ModalExample
Source