We help IT Professionals succeed at work.

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

Bruce Gust
Bruce Gust asked
on
Medium Priority
29 Views
Last Modified: 2020-02-20
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;

Open in new window


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?
Comment
Watch Question

Fractional CTO
CERTIFIED EXPERT
Distinguished Expert 2019
Commented:
Difficult to guess on a local site instance where no testing can be done.

Best you can do locally, is test your content generation using curl, looking at both headers produced + content rendered.

If you publish your site on a accessible site, people will be able to help much better.
CERTIFIED EXPERT
Most Valuable Expert 2012
Distinguished Expert 2019
Commented:
I don't know Compass but it appears the backslash in the path is being treated as a special character.  Does Compass have a string replace?

Try replacing '\' with either a '/' or two backslashes '\\' in resData.post.imageUrl
Bruce GustPHP Developer

Author

Commented:
Sorry for leaving you hanging for so long, gentlemen!

Thanks for your help!
David FavorFractional CTO
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
You're welcome!