I'm still new to React and after I finished the tutorial I wanted to create something myself.
I've passed the url to make a backgroundImage style and add borders to try it out. Unfortunately I can see the img being set in the css but it won't actually display as expected.
As a test I also tried a simple img with src attribute set to my image and nothing would display.
I made a folder called img inside the src
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<Home/>
</div>
);
}
}
function Portfolio(props) {
const stylee = {
backgroundImage:'url('+props.imgURL+')',
borderWidth: 1,
};
const ide = 'portfolio'+props.counting;
return (<div id={ide} style={stylee} className='portfolio'/>)
}
class Home extends Component {
renderPortfolio(count,img){
return <Portfolio counting={count} imgURL={img}/>
}
render(){
return(
<div>
{this.renderPortfolio(1,'./img/1.jpeg')}
{this.renderPortfolio(2,'./img/2.jpeg')}
{this.renderPortfolio(3,'./img/1.jpeg')}
<img src='./img/1.jpeg'/>
</div>
)
}
}
export default App;
What am I doing wrong that is preventing the images from displaying ?
edit-- I've changed my code to the working solution
Instead of passing the local img url, I used require() first then pass the image to props.
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<Home/>
</div>
);
}
}
function Portfolio(props) {
const counter = 'portfolio'+props.counting;
const loadGambar = props.gmbr;
// const loadGambar2 = require(props.gmbr);
const stylee = {
borderColor:props.color,
border:1,
borderWidth: 10,
backgroundImage: "url("+loadGambar+")",
}
return(
<div id={counter} className='portfolio' style={stylee}>
</div>
)
}
class Home extends Component {
renderPortfolio(count,gambare){
return <Portfolio counting={count} gmbr={gambare}/>
}
render(){
return(
<div>
{this.renderPortfolio(1,require('./img/1.jpg))}
{this.renderPortfolio(2,require('./img/1.jpg'))}
{this.renderPortfolio(3,require('./img/2.jpg'))}
</div>
)
}
}
export default App;
Here's a link to a working example based on your code: sandbox link.
The problem with setting a background image is that it adapts to the dimensions of the div. In your case your div is empty in Portfolio so its dimensions are 0x0 and the image won't show. You will see from the link that I update the style and everything shows. Now the only issue you might have is that you don't have an image loader in your webpack configuration, if you are starting with react I would recommend create-react-app.
Related
My main page looks like this :
import React from "react";
import { Fragment } from "react";
import ModalA from "../components/Modal/ModalOptionA";
export default class AePage extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Fragment>
<div className="grid-intro">
<div className="text-intro">
Some Text
</div>
<div className="modal-component-insert">
<ModalA show={true}/>
</div>
<div className="text-outro">
Some text
</div>
</div>
</Fragment>
)
}
}
And my component looks like this :
import React from "react";
import ReactDOM from "react-dom";
const Modal = ({ show, closed}) => {
return (
ReactDOM.createPortal(
<>
<div className="modal">
My Component
</div>
</>,
document.body
)
)
}
export default Modal;
The code above display something like :
Some Text
Some Text
My Component
Why does my component not display between the texts ? Is there a specific way for React to display this component between my divs ?
That is what ReactDOM.createPortal is for. It will always move things to the bottom of the DOM. That way, you can then position it above everything else using CSS.
It seems you don't really need that, so I'd just replace your code for the Modal component with:
import React from "react";
const Modal = ({ show, closed}) => {
return (
<div className="modal">
My Component
</div>
)
}
export default Modal;
Community, I rendered more than one component from a single page and the problem I receive is:
[./src/App.js Attempted import error: 'Greeting' is not exported from './components/Home'.]
Can anybody tell me why?
App.js
import "./App.css";
import { Home, Page, Greeting } from "./components/Home";
function App() {
return (
<div className="App">
<Home />
<Page />
<Greeting />
</div>
);
}
export default App;
Home.js
import React, { Component } from "react";
import React from "react";
class Home extends Component {
render() {
return (
<div className="box">
<h1>Its a box man!</h1>
</div>
);
}
}
class Page extends Component {
render() {
return (
<div className="box">
<h1>Its a second box man! from the other Component</h1>
</div>
);
}
}
const Greeting = () => {
return <h1>Hello again</h1>;
};
export { Home, Page, Greeting };
*The aim to practice two components from the same page, rather than just separating them.
Try to export all components one by one in Home.js like this:
export class Home...
export class Page...
export const Greeting...
And after that delete this line:
export { Home, Page, Greeting };
Change
const Greeting = () => {
return <h1>Hello again</h1>;
};
to
export const Greeting = () => {
return <h1>Hello again</h1>;
};
and your issue should be resolved
Try this in Home.js. If you export module as default, you can import without parenthesis {}. But if you export without default, you have to import using parenthesis.
export default { Home, Page, Greeting };
I tested your code and there was no problems except if these are not typos:
you haven't imported react in your App.js
you've imported react twice in your Home.js
The only problem I can think of is that you have forgotten to save Home.js.
If you've saved Home.js:
exit you're dev server using ctrl + c and start it again and see if the problem is resolved.
try removing Greeting Component and let us know if you still get errors.
I am using React and Firebase and receive the following when logged in
photoURL: https://graph.facebook.com/10157648190117379/picture
If I try to display this in JSX using:
<image src={this.props.user.photoURL} />
nothing renders.
I notice navigating directly to the link doesn't actually show an image, but prompts a download. Any ideas?
Thanks.
Yes, it won't work. Because there is a typo and there is no tag named Image in HTML.
To display an image, you have to use an img tag.
import React from 'react';
import './App.css';
class App extends React.Component {
state = { url: 'https://graph.facebook.com/10157648190117379/picture'}
render() {
return <img alt='Profile' src={this.state.url} />;
}
}
export default App;
No Problem in the URL. Just make sure to use the correct tag.
I try this and it work
import React from "react";
const TestCompOne = (props) => {
console.log("[TEST COMP 1]");
return (
<div>
<img src={"https://graph.facebook.com/10157648190117379/picture"} />
</div>
);
};
export default TestCompOne;
I have header.htm and footer.htm files and I would like to add these two files into my reactjs app. I tried to create header.htm as a component and render it in my app.js but it display as a string on the top not a page. ie. http://mydomain/include/header.htm. How do I solve this problem?
import React, { Component } from 'react';
class Header extends Component {
createMarkup()
{
return { __html: "https://mydomain/include/header.htm"};
}
render(){
return (
<div dangerouslySetInnerHTML={this.createMarkup()} ></div>
);
}
}
export default Header;
app.js
class App extends Component {
render(){
return (
<Header />
)
}
}
I have following code where i am trying to load images from Array, if i try to load a single image it works fine, but if i try to load multiple images it dosent show any image, tho my div test is in the dom.
import React, {Component} from 'react';
class Slider extends Component {
render() {
const myItems = [{source_image: '1.jpg'}, {source_image: '2.jpg'}, {source_image: '3.jpg'}];
return (
<div id="test">
{myItems.map(function (a) {
<img src={"images/"+a.source_image}/>
}
)}
</div>
);
}
}
export default Slider;
You forget return in map:
{myItems.map(function (a) {
return <img src={"images/"+a.source_image}/> // here
})
}
{myItems.map(a => <img src={"images/"+a.source_image}/>)} //this is more clear, I think