Hello guys im new to REACT im trying to pass my image props to {logo} has anybody a clue how i can set it up ?
123 is displayed but i still miss the image
export default class StickyHeader extends React.Component {
static propTypes = {
}
static defaultProps = {
}
render() {
const { logo } = this.props;
return (
<header>
<div className={'logo'}>
{logo}
</div>
<div>123</div>
</header>
);
}
}
<StickyHeader logo={ <img src="http://via.placeholder.com/350x150" alt="" /> }></StickyHeader>
In this case, I would put the image tag inside your sticky header component, and then pass just the logo url as a property, so your render method would look more like this:
render() {
const { logoUrl } = this.props;
return (
<header>
<div className={'logo'}>
<img src={logoUrl} />
</div>
<div>123</div>
</header>
);
}
}
and then your usage -
<StickyHeader logoUrl={'http://via.placeholder.com/350x150'} />
Related
I am trying to display profile pic by calling the path and file name from database
Profile Image is not loading is it the path?
using json server local test.
Image is saved in folder ../src/image/
json data
image: "..image/pic.jpg"
import { Card, ListGroup } from "react-bootstrap";
import { useParams, useHistory } from "react-router-dom";
import useFetch from "./useFetch";
const MemberProfile = () => {
const { id } = useParams();
const {
data: member,
error,
isLoading,
} = useFetch("http://192.168.0.23:8000/members/" + id);
const history = useHistory();
const handleClick = () => {
fetch("http://192.168.0.23:8000/members/" + member.id, {
method: "DELETE",
}).then(() => {
history.push("/");
});
};
return (
<div className="memberProfile">
{isLoading && <div>Loading...</div>}
{error && <div>{error}</div>}
{member && (
<Card style={{}}>
<Card.Img variant="top" src={member.image} />
<Card.Body>
<Card.Title>
<h2>
<strong>
Profile - {member.name} {id}
</strong>
</h2>
</Card.Title>
<Card.Text>
<pre className="acordnBody">
Gender : {member.gender} <hr />
Phone : {member.tel} <hr />
E-mail : {member.email} <hr />
Address : {member.address}
</pre>
</Card.Text>
</Card.Body>
</Card>
)}
</div>
);
};
export default MemberProfile;
I'm working with Sanity and Gatsby
I'm trying to map over an array of images to display them in an image gallery. My GraphQL query is working, I am able to display a single image but I receive the error: TypeError: Cannot read property 'fluid' of null When I attempt to map over the array.
Any direction is greatly appreciated!
My Query:
{
sanityGallery {
images {
asset {
fluid {
...GatsbySanityImageFluid
}
}
}
}
}
This Works:
const images = data.sanityGallery.images
<Img className="grow" fluid={images[0].asset.fluid} />
This Does not:
const images = data.sanityGallery.images
<div className="img-container">
{images.map((image, index) => {
console.log(image.asset.fluid); // <-- when adding this it logs the info in the screenshot below
return (
<div className="box">
<Img className="grow" fluid={image.asset.fluid} key={index} />
</div>
)
})}
</div>
Try something like:
const images = data.sanityGallery.images
<div className="img-container">
{images.map((image, index) => {
console.log(image.asset); //
return (
<div className="box">
{image.asset && <Img className="grow" fluid={image.asset.srcSet} key={index} />}
</div>
)
})}
</div>
I'm trying to build an image preview system for an avatar:
<template>
<div>
<div class="level">
<img :src="avatar" width="50" height="50" class="mr-1">
</div>
<form method="POST" enctype="multipart/form-data">
<input type="file" accept="image/*" #change="onChange">
</form>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
avatar: null,
setAuthHeader: axios.defaults.headers.common['Authorization'] = 'Bearer ' + this.$store.state.token,
};
},
computed: {
user() {
return this.$store.state.user
},
avatar_path() {
this.avatar = this.user.avatar_path
},
},
methods: {
onChange(e) {
if (! e.target.files.length) return;
let file = e.target.files[0];
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = e => {
this.avatar = e.target.result;
this.persist(file);
};
},
persist(avatar) {
let data = new FormData();
data.append('avatar', avatar);
this.setAuthHeader;
axios.post(`/settings/avatar`, data)
.then(() => flash('Avatar uploaded!'));
}
}
}
</script>
In my code the user computed property returns a JSON object from vuex which gets the object from local stroage.
What keeps happening is when I refresh the page that changes the profile image the default image doesn't show up. The element looks like this in chrome devtools:
<img width="50" height="50" class="mr-1">
When I open up vue dev tools, click on the component this functionality is in, the image src gets added:
<img width="50" height="50" class="mr-1" src="http://127.0.0.1:8000/storage/avatars/default.png">
You're using the avatar_path computed property incorrectly:
You shouldn't be modifying state in a computed property (you're assigning to this.avatar).
Nothing is accessing avatar_path for it to be called. It's when you open Vue dev tools that the dev tools code accesses that property so it can display it in the component data UI.
The best fix is to change avatar into a computed property like this:
computed: {
avatar() {
if (this.user) {
return this.user.avatar_path;
} else {
// Use a placeholder image URL
return '/path/to/placeholder.png';
}
}
}
<template>
<div>
<div class="level">
<img :src="avatar" width="50" height="50" class="mr-1">
</div>
<form method="POST" enctype="multipart/form-data">
<input type="file" accept="image/*" #change="onChange">
</form>
</div>
<script>
import axios from 'axios'
export default {
data() {
return {
setAuthHeader: axios.defaults.headers.common['Authorization'] = 'Bearer ' + this.$store.state.token,
};
},
computed: {
user() {
return this.$store.state.user
},
avatar() {
return this.user.avatar_path;
},
},
methods: {
}
}
I'm new to react and I'm trying to create a JSX element in a function. The JSX should dynamically add 2 buttons each time when you click the button. However, when render() calls this function, it isn't rendering the element (white page in browser).
How would I go about fixing this? Any help would be appreciated. Thanks!
class Test extends Component {
constructor(){
super();
this.state = {
fields: [{key:'key', val:'val'}]
}
this.renderPanel = this.renderPanel.bind(this);
}
addField() {
this.setState({
fields: [...this.state.fields, {key:'key', val:'val'}],
})
}
renderPanel(){
return <div>
<form>
<div id="testingAPanel">
{()=>this.state.fields.map((input,index) => {return(
<tr>
<input type='button' id={index} value={input.key} />
<input type='button' id={index} value={input.val} />
<br/>
</tr>
)}
)}
</div>
</form>
<button onClick={ () => this.addField() }>
CLICK ME TO ADD AN INPUT
</button>
</div>
}
render() {
return (
<div class = 'test'>
{()=>this.renderPanel()}
</div>
);
}
}
export default Test;```
class App extends React.Component {
buttonClick(){
console.log("came here")
}
subComponent() {
return (<div>Hello World</div>);
}
render() {
return (
<div className="patient-container">
<button onClick={this.buttonClick.bind(this)}>Click me</button>
{this.subComponent()}
</div>
)
}
}
ReactDOM.render(<App/>, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
it depends on your need, u can use either this.renderIcon() or bind this.renderIcon.bind(this)
UPDATE
This is how you call a method outside the render.
buttonClick(){
console.log("came here")
}
render() {
return (
<div className="patient-container">
<button onClick={this.buttonClick.bind(this)}>Click me</button>
</div>
);
}
The recommended way is to write a separate component and import it.
GOAL: use Gatsby to render Drupal 8 images associated with nodes
I can render the default Drupal 8 Article node info just fine using a GraphQL query. I cannot get the default image field to render (field_image) - it just renders the url of the image. So I'm almost there but definitely missing something fundamental. Help please?
import React from "react"
import { Link, graphql } from "gatsby"
import Img from "gatsby-image"
const BlogPage = ({data}) => (
<div>
<h1>Know What Grinds My Gears?</h1>
{ data.allNodeArticle.edges.map(
(
{ node }) => (
<div>
#the next Img line doesn't work (renders nothing)
<Img fluid={ node.relationships.field_image.uri.url } />
<h3> { node.title } </h3>
<div dangerouslySetInnerHTML={{ __html: node.body.summary }} />
<Link to= { node.id } >read</Link>
#the next <figure> line doesn't work (renders correct url to image file)
<figure> { node.relationships.field_image.uri.url }</figure>
</div>
)
)
}
</div>
)
export default BlogPage
export const query = graphql`
query allNodeArticle {
allNodeArticle {
edges {
node {
id
title
body {
value
format
processed
summary
}
relationships {
field_image {
uri {
value
url
}
}
}
}
}
}
}
`
what am I doing wrong?
The way we manage this is by having on the GraphQL of the node image:
field_image {
relationships {
field_media_image {
localFile {
publicURL
childImageSharp {
fluid(maxWidth: 520 maxHeight: 520, cropFocus: CENTER) {
...GatsbyImageSharpFluid
}
}
}
}
}
}
And then using it as
<Img
fluid={
data.nodePage.relationships.field_image.relationships.field_media_image.localFile.childImageSharp.fluid
}
/>