troubleshooting Question

Why does this image now show up despite some flawless code?

Avatar of Bruce Gust
Bruce GustFlag for United States of America asked on
Databases
4 Comments2 Solutions37 ViewsLast Modified:
Here's how the resource looks in Compass...

screenshot
So, it's getting stored in the database correctly. Here's what the React code looks like:

import React, { Component } from 'react';

import Image from '../../../components/Image/Image';
import './SinglePost.css';

class SinglePost extends Component {
  state = {
    title: '',
    author: '',
    date: '',
    image: '',
    content: ''
  };

  componentDidMount() {
    const postId = this.props.match.params.postId;
	if(postId) {
		fetch('http://localhost:8080/feed/post/' + postId, {
			headers: {
			Authorization: 'Bearer ' + this.props.token
			}
		})
		  .then(res => {
			if (res.status !== 200) {
			  throw new Error('Failed to fetch status');
			}
			return res.json();
		  })
		  .then(resData => {
			this.setState({
			  title: resData.post.title,
			  author: resData.post.creator.name,
			  image: 'http://localhost:8080/' + resData.post.imageUrl,
			  date: new Date(resData.post.createdAt).toLocaleDateString('en-US'),
			  content: resData.post.content
			});
		  })
		  .catch(err => {
			console.log(err);
		});
	}
  }

  render() {
    return (
      <section className="single-post">
        <h1>{this.state.title}</h1>
        <h2>
          Created by {this.state.author} on {this.state.date}
        </h2>
        <div className="single-post__image">
          <Image contain imageUrl={this.state.image} />
        </div>
        <p>{this.state.content}</p>
      </section>
    );
  }
}

export default SinglePost;

Here's what it looks like when you inspect that big, honking blank where the image should be displayed:

[code]<div class="image" style="background-image: url(&quot;http://localhost:8080/imagesmuscular.PNG&quot;); background-size: contain; background-position: center center;"></div>[code]

Why does the image get rendered as "imagesmuscular.PNG" as opposed to "image/muscular.PNG?"

Any ideas?
ASKER CERTIFIED SOLUTION
David Favor
Fractional CTO
Join our community to see this answer!
Unlock 2 Answers and 4 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 2 Answers and 4 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros