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
Related
First React project here, so probably a very elementary question, but I'd appreciate any help as I'm not really sure how to phrase my question to search. I have this component:
import React, { Component } from 'react';
import SmallOgLogo from '../../../static/images/OG_logo.jpg';
export default class HeaderNavbar extends Component {
constructor(props) {
super(props);
this.state = {
showImage: true
}
}
render () {
return (
<div>
<div className='header-navbar'>
<div>
<img className='SmallOgLogo' src={SmallOgLogo}/>
</div>
)}
<h1>Title</h1>
</div>
</div>
);
}
}
This is a header for a project I'm working on. It is on every page in the React project. However, on the "title page" (first page users see with the option to "register" or "login"), I don't want it to display SmallOgLogo. On every other page, it will (hence the default setting of true. How can I make it so when I embed this component in another component, I can do something like ? Can anyone clarify? Thank you!
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;
I've been trying to import an image using react and webpack however I haven't been successful yet.. I already installed file-loader and url-loader using npm, I already configured the webpack.config file as I saw it on the docs however I just get an error..
https://drive.google.com/open?id=1vdSpLwgwJgUuBCKjej_QosJazMaiGe7P
thanks for any help!
Instead write like this in your SearchBar component.
import Minor from './minor.png'
class SearchBar extends component{
render(){
return(
<img src={Minor} alt="myLogo" />
)
}
}
I'm totally new to react with the exception of a few tutorials on some basic things so I feel I've thrown myself into a bit of a deep end here.
I'm trying to use gridStack and found a nifty wrapper for it to use within React. I've managed to struggle through getting all the dependancies up and running but have now encountered an error which I can't resolve:
this.cellHeight is not a function(...). I've been looking around loads to try and understand why this isn't defined as I'm following their basic addition on their site found here.
I've had to modify it a bit to make it play nice as I've whittled down all the errors and found this to be the last one which I just can not get my head round. Any help would be amazingly appreciated.
import React from 'react';
import GridStack from 'gridstack';
import {GridStackItem} from 'react-gridstack';
class MyGrid extends React.Component{
render(){
return(
<GridStack cellHeight={50} vertical={10}>
<GridStackItem id='item_1' x={0} y={0} minHeight={2} minWidth={2}>
First Item
</GridStackItem>
<GridStackItem id='item_2' x={0} y={2}>
Second Item
</GridStackItem>
</GridStack>
);
}
}
export default MyGrid;
The component is then being applied through my App class
import React, {Component, PropTypes} from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery';
import Bootstrap from 'bootstrap/dist/css/bootstrap.css';
import MyGrid from './gridstack.jsx';
window.$ = $;
class App extends React.Component {
render() {
return(
<div>
<p>Hello WORLD!!!!</p>
<MyGrid/>
</div>
)
}
}
ReactDOM.render(<App/>, document.getElementById('root'));
You can see that this is all basic first steps kind of stuff as I find my feet around React.