This my code for the a components inside my Next.js 13 with ts, eslint, as well as Chakra UI.
Both images and videos is not working or showing.
I tried the HTML <img> tag as well as importing Image from Chakra. Still the same issue it's not working.
import { Flex } from "#chakra-ui/react";
import Image from 'next/image';
const Navbar:React.FC = () => {
return (
<>
<Flex bg="white" height="44px" padding="6px 12px">
<Flex>
<Image
src={"/public/images/logo.png"} alt='Apex Logo' width="350" height="300"/>
</Flex>
</Flex>
<video src={'/public/images/about video.mp4 '} controls height="100%" width="100%"></video>
</>
)
}
export default Navbar;
I think you dont have to pass /public
src={"/images/logo.png"}
next.js automatically will go inside public folder
Related
Simply I wanna display images that I'm receiving through props
import Image from "next/image";
import classes from "./book-item.module.css";
export default function FoodItems(props) {
return (
<li className={classes.product__item}>
<Image
src={props.imageUrl}
alt={props.title}
className={classes.image}
width={100}
height={100}
/>
<h3>{props.title}</h3>
<p>{props.price}</p>
</li>
);
}
I'm getting this error from the above code:-
Your error clearly states what you are missing i.e you need to add allowed domains for images to load from in next.config.js file.
Open next.config.js file
Add images: { domains: ["itbook.store"], }, add all the domains from where you load images in this array
I have one personal nextjs poject and I need to use slides like "tiktok style". To do so I tried to use the library react-responsive-carousel on vertical mode. Everything seems to be all right in dev mode, but when I try to build it, then it doesn't show me anything. It just disappears. I confirm that the problem is only with the prop axis="vertical" while with default axis="horizontal" everything seems to be all right.
Did anyone had the same issue with this library?
This is my code:
import { NextPage } from "next";
import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from "react-responsive-carousel";
const Body: NextPage = () => {
return (
<div>
<Carousel
emulateTouch
showArrows={false}
showStatus={false}
showIndicators={false}
showThumbs={false}
width={"100%"}
dynamicHeight
>
<Header />
<AboutMe />
<Projects />
<Footer />
</Carousel>
</div>
);
};
export default Body;
The purpose is to slide my pages vertically like reels or tiktok. I also tried the library react-slick but it has some troubles on mobile devices. It refreshes the page when I slide up.
Do you have any idea on how to fix this? Or do you have another solution?
p.s. I am not getting any error in console
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} />
))
}
I am building reactJs app, I am using react-pdf/renderer to render the pdf. I want to show Header in the pdf.
Below is the my code.
MainComponent.jsx
<Document>
<Page size="A4" style={styles.page}>
<MyFixedHeader style={{flex: 0.2}}/>
<Image style={styles.image} src={Logo} />
<Text style={styles.text}>
{pdfData}
</Text>
</Page>
</Document>
MyFixedHeader.jsx
import React, { useEffect, useState } from 'react';
export const MyFixedHeader = () => {
return (<>
hi
</>)
}
By using this code, I am getting blank screen.
Thanks.
I added a screenshot of how to add a footer on each page end. here is the link https://react-pdf.org/repl you can test it here
#mehak
are you applying these styles??
you can check here official site https://react-pdf.org/advanced
and there are many different other ways to create Header and Footer for react-pdf
Added Horizontal Line
How to register Font?
I am trying to display a background video on my web app after fetching it from firebase storage. The code looks something like this:
import React, { useState, useEffect } from "react";
import { storage } from "../firebase";
const videoRef = storage.ref().child('<filename>');
export default function Dashboard() {
const [videoURL, setVideoUrl] = useState('');
useEffect(() => {
videoRef.getDownloadURL().then((url) => {
setVideoUrl(url);
});
}, []);
return (
<div>
<video width="400" autoPlay muted loop>
<source src={videoURL} type="video/mp4"/>
Your Browser does not support HTML video.
</video>
</div>
);
}
The resulting page is blank, but inspecting the element via dev tools shows the video element with the correct url. In fact, if I just copy the url and hard code it as src it works just fine.
I assume there is some issue related to React not refreshing after updating the url but I haven't found a solution so far.
You need to render <video> tag when the videoURL is available.
return (
<div>
{!!videoURL && (
<video width="400" autoPlay muted loop>
<source src={videoURL} type="video/mp4"/>
Your Browser does not support HTML video.
</video>
)}
</div>
);
You should try to use a component to do that.
i found react-player very easy to use.
https://www.npmjs.com/package/react-player
example of usage:
import React from 'react'
import ReactPlayer from 'react-player'
// Render a YouTube video player
<ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' />
Try adding the videoRef inside the dependency array on the useEffect.