CODEWITHSUNDEEP
javascriptjqueryimage
user2320121
user2320121

Reputation: 11

Code appending my img src

I'm wondering if someone can help me with trying to know why and possible solution to my error. I'm using JavaSript to load images, but when I test my page the src attribute is getting a / at the end of .jpg.

My console looks as follows: 

    //JavaScript OBJECT 
    var reviews = [
    { Id: "ajjhwejkssl", 
    Title: "The little camera that could!", 
    Rating: 5, Body: "text here",
    CreateDate: new Date(2012,5,23,14,12,10,0),
      Owner: {
        Id: "kwergiueerwq", 
        Name: "Bugs Bunny", 
        Url: "./users.html?id=kwergiueerwq", 
        AvatarImage: "avatars/bugsbunny", 
        IsFeaturedReviewer: false, 
        CreateDate: new Date(2012,2,12,9,44,0,0)
        }
    }]



  var data = reviews;
  var newDiv = null;
  var my_div = null;
  var my_img = null;
  var total = document.getElementById('total');
  var review = $('#reviews');
  $(document).ready(function(){


     for (var i = 0; i < data.length; i++){
       console.log("loop: " + data[i].Owner.AvatarImage + rand);
        var rand = ".jpg/"; 
        rand.replace(rand , ".jpg");

       //CREATE NEW REVIEW DIV
       var reviewPost = "<div class='review'><div class='clear'></div><div class='content'><div class='datePosted'>" + data[i].CreateDate + "</div><div class='avatar'><div class='header'><div class='rating'><img src='images/star-sprite.png'/><img src='images/star-sprite.png'/><img src='images/star-sprite.png'/><img src='images/star-sprite.png'/><img src='images/star-sprite.png'/></div></div><div class='clear'></div><div class='title'>" + data[i].Title + "</div><div class='memberImg'><img class='userImg' src=" + data[i].Owner.AvatarImage + '.jpg'+"/></div><div id='member'><div class='reviewedBy'>Reviewed by <a href='"+data[i].Owner.Url+"' class='member'>" + data[i].Owner.Name + "</a></div><div class='membership'>Member Since " + data[i].Owner.CreateDate + "</div></div></div></div><div class='clear'></div><div class='message'>" + data[i].Body + "</div></div><div class='clear'></div>";

       //adds reviewPost inside of reviews
       review.append(reviewPost);

     $.each(".userImag" , function (){
        //console.log("data: " + data[i].Owner.AvatarImage);
        $(this).attr('src', data[i].Owner.AvatarImage + 'jpg');

    });

     }

  });

Upvotes: 1

Views: 119

Answers (3)

Zim84
Zim84

Reputation: 3497

var rand = ".jpg/"; 
rand.replace(rand , ".jpg");

This doesnt make any sense at all. You are asigning a variable a value and replace that variable by itself ._0

You may want something like this:

var StringContainingFilePath;
var search = ".jpg/";
var replace = ".jpg";
StringContaingingFilePath = StringContaingingFilePath.replace(search,replace);

Upvotes: 0

Josh LaMar
Josh LaMar

Reputation: 209

Take a look at this code:

console.log("loop: " + data[i].Owner.AvatarImage + rand);
var rand = ".jpg/"; 
rand.replace(rand , ".jpg");

The first line you're adding "+ rand" which rand has not be defined. The second line you are setting the rand variable And the third line is pretty much being ignored because no variable is being assigned to it. I don't think .jpg/ is actually in your image's source.

Josh

Upvotes: 1

Dmitry Sokolov
Dmitry Sokolov

Reputation: 3180

I think the problem is in

var rand = ".jpg/"; 
rand.replace(rand , ".jpg");

the String.replace method just returns a changed string but do NOT change the original one.

String.replace

Description

This method does not change the String object it is called on. It simply returns a new string.

Upvotes: 1

Related Questions