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
4 Comments2 Solutions37 ViewsLast Modified:
Here's how the resource looks in Compass...

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 => {
			  image: 'http://localhost:8080/' +,
			  date: new Date('en-US'),
		  .catch(err => {

  render() {
    return (
      <section className="single-post">
          Created by {} on {}
        <div className="single-post__image">
          <Image contain imageUrl={this.state.image} />

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?
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