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')} />
Related
I'm not able to access the images folder. components available in src directly are able to access the images folder but components in the pages folder are not able to access the images folder, tried different paths but not working.
import React from "react";
import TitleImg from "../images/title-text.png";
import eyes from "../images/eyes.png";
const Sad = () => {
return (
<>
<img src={TitleImg} alt="the-sad-guys" />
<img className="w-3/6" src={eyes} alt="eyes" />
</>
);
};
export default Sad;
In your example the route is not correct. ../../images/title-text.png must work.
If this doesnt work, try
./../../images/title-text.png
For a website using NextJS and Sanity.io,
I am importing an image locally
import large_logo from '../../assets/logo-large-1200x630.svg
and am calling it inside an img tag as src
<img src={large_logo}/>
However, the image is broken and not displayed.
The HTML is rendered as
<img src="[object Object]">
The only solution to this problem was to call the src of the "object"
<img src={large_logo.src}/>
However vanilla React does not require us to call the src.
Does importing not work when using NextJS and Sanity?
For Next.js you have to do something like this:
/* import Image component */
import Image from 'next/image';
/* import the required svg file */
import large_logo from '../../assets/logo-large-1200x630.svg
and then in JSX
<Image src={large_logo} />
When you are using Next.js and wanna render an image that the size is more than 40*40(pixels) need to import the <Image /> component from next/image.
That component optimize your image and render in your Application. So follow the example below to help yourself..
import Image from 'next/image';
import large_logo from '../../public/logo-large-1200x630.svg
inside your component you can add this code snipet for your image
<Image src={large_logo} alt="logo" width={200} height={100} quality={100} />
First of all you need to change the image directory of the image and put it in your public directory of your App, cause this is the default behaviour that Next.js needs for the images.
Inside your component you need to pass the src value, alt value and usually height - width prop or layout prop.
You can also need the official documentation for the of Next.js : https://nextjs.org/docs/api-reference/next/image
I'm having a problem with importing SVG files in React JS.
import { ReactComponent as Logo} from '../logo.svg'
i don't know why but in some components <Logo /> will render correctly
while in other components it doesn't show, the SVG is there when i use inspect and it does take the space it needs but the SVG is blank / empty.
anyone else encountered this issue?
Try:
import { default as logo } from '../logo.svg';
and use as source in a node of type img, like this:
<img src={logo} />
I had the same exact issue and wrapping the logo component in an svg tag or div made it render on to the screen for me. I can also change the SVG color by setting it from the logo as well.
import { ReactComponent as Logo} from '../logo.svg'
<svg><Logo fill="blue" width="100%" height="100%" /></svg>
// or...
<div><Logo fill="blue" width="100%" height="100%" /></div>
Without the <svg> or <div> tag wrapped around it, it was rendering a blank image, taking up the space and all but no visuals. Once I added the wrapper tag around it, it worked. I like this approach since you can dynamically change the SVG styling based on user input.
I had same problem, for some it was how i imported them so I resolved this by using:
import {ReactComponent as Icon} from 'pathtoyourfile.svg
then use as:
<Icon />
Other times however, and I have fallen foul to this a few times, SVG's often have similar class and id names, so if you check the file you might see clip0, image0, pattern0 etc. If you have multiple svg's good chance the ID's and Class names are clashing and are overriding each other. For me the easiest solution was to change the naming convention manually, not sure if a more automated solution exists?
You could do it like so
import React from 'react';
import logo from './logo.png'; // Tell webpack this JS file uses this image
console.log(logo); // /logo.84287d09.png
function Header() {
// Import result is the URL of your image
return <img src={logo} alt="Logo" />;
}
export default Header;
I checked, only create-react-app could use SVG as a component
https://create-react-app.dev/docs/adding-images-fonts-and-files/#adding-svgs
Note: this feature is available with react-scripts#2.0.0 and higher,
and react#16.3.0 and higher.
I am trying to import a JSON object from a js file in my React project. I am a newbie to React so please go easy :). I keep getting an error no matter what path I change it to (cannot be found). I've attached a screengrab of the directory structure. I am in the scripts/components folder in the home.js file. Thanks. Data is the object in the JSON file imported from the "server" folder.
import React from 'react';
import data from '../server/data';
class Home extends React.Component {
render() {
return (
<section id="home">
<div className="content">
<p>Test...</p>
</div>
</section>
);
}
}
// Export out the React Component
module.exports = Home;
You have to go three directories up.
../ takes you to scripts.
../../ takes you to app.
../../../ takes you to the project root.
thus,
import data from '../../../server/data';
I am trying to access an image in a React App. When I run the code I get a broken image icon on web page. I am not sure if I am accessing the right path for the image. The code I have is the following:
import React, { Component } from 'react';
class HeaderName extends Component {
render() {
return (
<div>
<h1>The AquaStars New Website.</h1>
<img src="./images/picture_swimmers.png" />
</div>
)
}
}
export default HeaderName;
The structure of the code is the following
Seems like you are using the wrong path. If I am seeing this correct the code you posted above is from header.js which is in the src folder. Since your images folder is in public you would need to step up one folder then over to public first. The path you would want to use is,
../public/images/picture_swimmers.png
Just note if you plan on creating a production build this path would be different. One suggestion I have used before is if the images must be in the public folder then you can reference them like,
src={process.env.PUBLIC_URL + '/images/picture_swimmers.png'}
I was having the same issue today, my image appeared broken.
When I imported the image first in the component it worked fine, in your case it will look something like the code below.
import React, { Component } from 'react';
import image from './images/picture_swimmers.png'
class HeaderName extends Component {
render() {
return (
<div>
<h1>The AquaStars New Website.</h1>
<img src={image} />
</div>
)
}
}
export default HeaderName;