Trying to get the src path of image in react - javascript

Im having issues getting the image src path for graph CMS using react & graphQL. The problem is the path is always returning null. I'm sure this has been asked many times but in order for me to learn I just need to see what I am doing wrong.
My query in graphQL is this:
query {
products {
id
name
price
description
createdAt
image {
id
url
}
}
}
I always get all the other information but not the image src (which returns null).
my code is as follows:
import React from 'react';
const Product = (props) => {
return (
<div className="col-sm-4">
<div className="card" style={{width: "18rem"}}>
<img src={props.product.image.url} className="card-img-top" alt={props.product.name}/>
<div className="card-body">
<h5 className="card-title">{props.product.name}</h5>
<p className="card-title">$ {props.product.price}</p>
<p className="card-title">{props.product.description}</p>
<button className="btn btn-primary" onClick={() => props.addItem(props.product)}>Buy now</button>
</div>
</div>
</div>
);
}
export default Product;
Any help would be much appreciated.

Marko Savic is right, it returns null
ANSWER: in GraphCMS you have to make sure you publish 'content' AND 'assets'
Published Assets in GraphCMS

Related

React not Loading Local Images

Recently I've been studying React. I'm facing some issues in my code and don't know the reason.
I'm trying to load a local image in my webpage with the following code:
import React from 'react'
import './style.css'
import Card from '../UI/Card'
const BlogPost = (props) => {
return (
<div className="blogPostContainer">
<Card>
<div className="blogHeader">
<span className="blogCategory">Featured</span>
<h1 className="postTitle">Beautiful is Beautiful</h1>
<span className="postedBy">Post on 31 of July, by Victor Arduin</span>
</div>
<div className="postImageContainer">
<img src={require('../../blogPostImages/img1.jpg')} alt="Post Image"/>
</div>
</Card>
</div>
)
}
export default BlogPost
However, when I access the webpage there is no image. When I check the elements of the page I find the following code:
Somehow, it looks like the image is not being loaded to the page. I have checked many questions in the forum, but none of them seems to explain this problem.
I also tried to reinstall few modules as webpack and other dependencies, but the problem still persists. The tree of files of my project are as following:
Thank you for the support!
Try importing the image as
import postImage from "../../blogPostImages/img1.jpg";
Modified code
import React from 'react'
import './style.css'
import Card from '../UI/Card'
import postImage from "../../blogPostImages/img1.jpg"
const BlogPost = (props) => {
return (
<div className="blogPostContainer">
<Card>
<div className="blogHeader">
<span className="blogCategory">Featured</span>
<h1 className="postTitle">Beautiful is Beautiful</h1>
<span className="postedBy">Post on 31 of July, by Victor Arduin</span>
</div>
<div className="postImageContainer">
<img src={postImage} alt="Post Image"/>
</div>
</Card>
</div>
)
}
export default BlogPost
import Img1 from '../../blogPostImages/img1.jpg';
<img src={Img1}/>

require method not working in React for dynamic content

import React from 'react';
import '../styles/animation.css';
const Animation = ({ name, gif, description, link }) => {
return (
<div className="block">
<div className="naslov-link">
<h3>{name}</h3>
<span className="animation-link-header">
Visit
</span>
</div>
<img src={require(gif)} alt={name}/>
<p>{description}</p>
</div>
);
}
export default Animation;
gif is location of the image that is taken from database, I tried logging it and it works, but image
can't be loaded. I get:
Error: Cannot find module '../images/placeholder.jfif'
on line :
<img src={require(gif)} alt={name}/>
also tried
<img src={gif} alt={name}/>
Then I don't get error but image can't be loaded, I get the alt text

Render different html depending on index of object in react

In my meteor project I have a collection called auctions. Using react I wish to render 3 columns of this auctions with unlimited number of rows. To accomplish this I thought it would be possible to send the index of the object but I have no idea how to do this. Another problem is that it shows an error with the html code since I'm not closing the 'div' tag.
This is my App.js:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { withTracker } from 'meteor/react-meteor-data';
import { Auctions } from '../api/auctions.js';
import Auction from './Auction.js';
//App component - represents the whole app
class App extends Component {
renderAuctions() {
return this.props.auctions.map((auction, index) => (
<Auction key={auction._id} auction={auction} index={index} />
));
}
render() {
return (
<div className="container section">
<div className="row">
{this.renderAuctions()}
</div>
</div>
);
}
}
export default withTracker(() => {
return {
auctions: Auctions.find({}).fetch(),
};
})(App);
And my Auction.js:
import React, { Component } from 'react';
//Task component - resepresnts a single todo item
export default class Auction extends Component {
render() {
if(index % 3 === 0) {
return (
</div> /* Shows an erros here because of closing tag*/
<div className="row">
<div className="col s4 ">
<div className="card">
<div className="card-image">
<img src="images/logo.png" />
</div>
<div className="card-content">
<span className="card-title">
{this.props.auction.auctionName}
</span>
<p>
I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.
</p>
</div>
<div className="card-action">
This is a link
</div>
</div>
</div>
);
} else {
<div className="col s4">
<h1>Brincoooo</h1>
<div className="card">
<div className="card-image">
<img src="images/logo.png" />
</div>
<div className="card-content">
<span className="card-title">
{this.props.auction.auctionName}
</span>
<p>
I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.
</p>
</div>
<div className="card-action">
This is a link
</div>
</div>
</div>
}
}
}
Any time you return HTML from a render function it needs to be self contained and have balanced tags. That's the way React works, and why it's giving you an error.
Instead of trying to group 3 auctions at a time, you could think of using flexbox instead. With flexbox you simply render all of your auctions, and it looks after the wrapping automatically for you. Users with wider screens will see more than 3 columns, and users on mobile will see probably one when in portrait mode.
If you want to learn about flexbox, there is a cute tutorial here: https://flexboxfroggy.com/ There are plenty of tutorials around if you don't like that one, such as this: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
I'll let you do the work from here

React application <img> tag displays the old (probably cached) image as the url is same

I have a small component in my React application which fetches avatar from backend (nodejs) displays it. The problem is that tag continues to display old image even after i update the avatar.
export default class Avatar extends Component {
componentDidMount() {
this.props.getAvatar(this.props.userId)
}
render() {
const { userAvatar } = this.props.users;
if (userAvatar) {
return (
<div class="ui small image">
<img class="big img"
src={ intelliats.server.BASE_URL + userAvatar.img_url } />
<a onClick={this._changeImage.bind(this)}>
<i class="write icon"></i> change avatar
</a>
</div>
)
}
return (
<div class="ui small image">
<img class="big img"
src={ intelliats.server.LOCAL_URL + "/imgs/lena.png" } />
<a onClick={this._changeImage.bind(this)}>
<i class="write icon"></i> change avatar
</a>
</div>
)
}
}
I figured it out. The best way to do this was generate a random number at the backend and append it to the image url. For e.g. http://www.yourdomain.com/img/yourimage.jpg?ver=387565675. So every time the number changes react displays the new image.

Fluxible and Navlink routing error

I m actually developping an application using fluxible and I m facing a problem using route parameters.
Actually, I m having this render function :
render() {
return (
<div className="card small hoverable">
<div className="card-image">
<img src="http://www.gizmobolt.com/wp-content/uploads/2014/11/14-77.jpg"/>
<span className="card-title">{this.props.title}</span>
</div>
<div className="card-content">
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div className="card-action">
<NavLink routeName="ProjectDetail" navParams={{id: this.props.key}}>Manage</NavLink>
</div>
</div>
);
}
And this route in my ./conf/routes.js :
ProjectDetail: {
path: '/project/:id/details',
method: 'get',
page: 'ProjectDetail',
title: 'Project detail',
handler: require('../components/ProjectDetail'),
notInMenu:true
}
And here's the error that I get :
/soft/blog/node_modules/fluxible-router/lib/createNavLinkComponent.js:94
throw new Error('NavLink created without href or unresolvable
^
Error: NavLink created without href or unresolvable routeName 'ProjectDetail'
It happens only when I try to use parametered routes in routes.js.
I dont have any idea of making it differently :-/
according to https://github.com/facebook/react/issues/2429 you cannot reference this.key or this.props.key from a component.
The recommendation in this comment is to
I would suggest renaming or duplicating the prop [sic key] name as a possible fix if you really need to access it.
so change your code to something like
render() {
return (
<div className="card small hoverable">
<div className="card-image">
<img src="http://www.gizmobolt.com/wp-content/uploads/2014/11/14-77.jpg"/>
<span className="card-title">{this.props.title}</span>
</div>
<div className="card-content">
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div className="card-action">
<NavLink routeName="ProjectDetail" navParams={{id: this.props.id}}>Manage</NavLink>
</div>
</div>
);
}
and in the parent rendering component, do:
render() {
{this.states.cards.map(function eachCard(card) {
return <CardItem key={card.id} id={card.id} />;
});
}
It looks like you have the casing wrong: ProjectDetail vs projectDetail. Make sure you are being consistent.

Categories