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
Related
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
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 have local icons, and I add icons in build folder like screenshot below, then I was import icons like that import {ReactComponent as MyIcon} from "build/icons/my-icon.svg";, but still say "Can't resolve 'build/icons/my-icon.svg'", any idea?
Screenshot:
you need to use file-loader
and when you import dont use brackets since its default export just chose the name directly
import myIcon from "build/icons/my-icon.svg";
const App = () => {
return (
<div className="App">
<img src={myIcon} />
</div>
);
}
Svg tag
second option would be to extract the svg tag and put it directly into you component ,
const App = () => {
return (
<div className="App">
<svg .... // copy the content of your .svg
</svg>
</div>
);
}
I am trying to build a site using react.js and I was able to render the picture but I am not able to view the picture. I need some help. I am creating a website for a client. I am trying to render the image from Header.jsx. The picture is saved in public/Images/Img1.jpg. I have a component folder which as App.jsx, CreateArea.jsx, Header.jsx, Footer.jsx and Navbar.jsx.
[Error with pic
import React from "react";
import NavbarHeader from "./Navbar";
function Header() {
return (
<header>
<NavbarHeader
/>
<h1>SyncTech Solutions- Take your business beyond the four walls. </h1>
<img src = "/Images/Img1.jpg"></img>
</header>
);
}
export default Header;
]1
You need to use
<img src={`${process.env.PUBLIC_URL}/Images/Img1.jpg`} />
for using images from public folder.
process.env.PUBLIC_URL will store your public url... The one which you access with %PUBLIC_URL% in the index.html file.
You could use require or import syntax if your image was inside src folder since it would be processed by webpack then.
But process.env.PUBLIC_URL seems to be the correct option in your case.
Replace your <img> tag with
<Image source={require('./Images/Img1.jpg')} />
I am new to gatsbyjs and using v2.
I've 3 components - loader, header and layout.
layout.js
import React from "react"
import Helmet from 'react-helmet'
import { StaticQuery, graphql } from 'gatsby'
import Header from "./header"
import Loader from "./loader"
import 'bootstrap/dist/css/bootstrap.min.css'
import "./layout.module.css"
const Layout = ({ children }) => (
<StaticQuery
query={graphql`
query SiteTitleQuery {
site {
siteMetadata {
title
menuLinks {
name
link
}
}
}
}
`}
render={data => (
<React.Fragment>
<Helmet
title={'tite'}
meta={[
{ name: 'description', content: 'Sample' },
{ name: 'keywords', content: 'sample, something' },
]}
>
</Helmet>
<Loader />
<Header menuLinks={data.site.siteMetadata.menuLinks} siteTitle={data.site.siteMetadata.title} />
<div>{children}</div>
</React.Fragment>
)}
/>
)
export default Layout
In index.js
import React from 'react'
import Layout from "../components/layout"
export default () => (
<Layout>
</Layout>
)
Every component is being rendered twice as shown in screenshot.
Another issue I am facing with images. All the images are in src/images/ and when I use it as below in header component:
import React from "react"
import { Link } from 'gatsby'
import styles from "./layout.module.css"
const logo = 'src/images/logo.png';
const Header = ({ siteTitle, menuLinks }) => (
<header className={styles.header_area}>
<nav className={`${styles.navbar} navbar-expand-lg ${styles.menu_one} ${styles.menu_four}`}>
<div className="container">
<a className="navbar-brand sticky_logo" href="#">
<img src={logo} alt="logo" />
The image doesn't show up on a page. I checked Source in chrome developer tools and found that images are not being served via webpack.
So, why components render twice and why image doesn't show up ? what am I missing or doing worng here ?
I had the same issue when using the gatsby-plugin-layout plugin. The doc is not really clear, but when using the gatsby-plugin-layout plugin, you don't need to wrap your page between the Layout component. That plugin takes care of this automatically. If you explicitly wrap your JSX between the Layout component, the Layout is rendered twice.
I'm not sure why your page is loading double components, are you coming to the site directly, or from another path?
For your image not showing up, this is why:
Everything in your src folder is meant to be dynamic, meaning it won't be served directly. If you want to include image statically, you can create a public folder in your root directory (at the same level with src folder), and put images in there. Anything in this public folder will be served directly. So for example, you can have this structure:
|-- src
`-- public
`-- images
`-- logo.png
Then in your code, you can include the path like
<img src="/images/logo.png" alt="logo" />
I think for a logo like your use case, this method is sufficient. However, if you always link images like this, you'll be missing out a lot of gatsby's cool feature. For example, gatsby can load your image lazily, or optimize the file size! You can learn more here (gatsby official blog).