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;
Related
I'm trying to to currently add an svg to my React-App.
I've got a nginX running that currently only servs one picture (localhost:80/ban.svg is reachable by browser and returns the correct icon).
import React from "react";
export class App extends React.Component{
render(){
return <img src={"localhost:80/ban.svg"}/>
}
}
Above Code doesn't work tho. It just says "Could not load the image" and displays the default browser error picture.
I'm fairly new to React, so sorry if this is something really obvious. Thanks for the help.
import React from "react":
export class App extends React.Component{
render(){
return <img src={"http://localhost:80/ban.svg"}/>
}
}
Try this
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 learn react and came across this code:
import React, { Component } from "react";
import Header from "./components/structure/Header";
import Content from "./components/structure/Content";
import Footer from "./components/structure/Footer";
import Resume from "./resume.json";
class App extends Component {
componentDidMount() {
document.title = [
Resume.basics.name,
Resume.basics.label,
[Resume.basics.location.region, Resume.basics.location.country].join(", ")
].join(" | ");
}
render() {
return (
<div>
<Header />
<Content />
<Footer />
</div>
);
}
}
export default App;
What I cant figure out is how is document.title used? I cant see that it is exported or that
any part of the code(other components) are using it.
Maybe it's not used and could be removed??
The variable "document" is an environment variable provided by the browser,
It gives you access to various features to access the page elements, on of those features is to access the "title" of the page and read or edit it, which you can see at the top of the browser.
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've got a react project in a folder 'react-test' and inside are all of the json and node modules etc and the src folder installed by running create-react-app.
Inside the src folder I've got App.js and a components folder with Titles.js inside.
I want to import a class named Titles from Titles.js.
I'm using the relative file path ./components/Titles.js but I get the following error when I do:
./src/App.js
Module not found: Can't resolve './components/Titles.js' in '/Users/username/Documents/ReactApp1/react-test/src'
This is my Titles.js component:
import React from "react";
class Titles extends React.Component {
render() {
return (
<div>
<h1>Weather Finder</h1>
<p>Find out temperature, conditions, and more...</p>
</div>
);
}
}
export default Titles;
This is my App.js component:
import React, { Component } from "react";
import Titles from "./components/Titles.js";
export class App extends Component {
render() {
return (
<div>
<Titles />
</div>
);
}
}
export default App;
I've been trying to mess with the file path in the import statement but nothing has worked so far. Thank you for your time.
Try to put in your Titles.js file at the end of your code :
export default (the name of your component)