Antony Antony - 3 months ago 11
HTML Question

Script works on xampp but not on host server

The script is supposed to display posts and images from a user. It works well on Xampp but on host server I only see posts but not the images the user has posted. It is blank. On the network tab it cannot be seen either. Here is that script part:

var post = function(url){
$('#apost').show();
$('#apost').html('<i class="fa fa-circle-o-notch fa-spin afo"></i>');
$.ajax({
type: 'GET',
url: url,
success: function(data){
var template = $("#itemTemplate").html();
var result101 = Mustache.render(template, jQuery.parseJSON(data));
$(".post-content").html(result101);
$('#apost').hide();
},
complete: function(){
setInterval(post('ajax/post?page='+pagenum), 30000);

},
error:function(){
$('.don').html('error loading post');
}
});
};


Here is the html part:

<div class="media-content">
<div>{{post}}</div>
{{#is_photo}}
<img src="uploads/scaled/{{photo44}}" alt="{{username}}" />
<p>{{caption}}</p>
{{/is_photo}}
</div>

Answer

You need to provide a path that is accessible from host server. Host server sees your localhost path and if the directory tree of your images is not the same as your local server, this is an expected behaviour because there is nothing inside host server's local path.

Two ways:

  1. Create exact same path in your host server and put your images there.
  2. Apply relative path specifications (don't use localhost.../...), instead, get your images from some place like this: static.yourproject.com/images/xyz.png
Comments