Possible to replace facebook 'question mark'?

JavaScript
1

Hi,

I am pulling in the profile images of users to my webpage / app which is working fine.

However, I would like to replace the horrible question mark image that appears when a user has not uploaded one. The problem is I can’t figure out how to target the scr attr as it is transformed on page AFTER the page has requested it.

For example:

<img src="https://graph.facebook.com/106046376093686/picture?type=large" width="140px" height="140px">

is transformed to https://s-static.ak.facebook.com/rsrc.php/v1/yA/r/gPCjrIGykBe.gif

I was hoping to target the img src for ‘static’ and change it to my own (much nicer) missing image.

$('img').each(function(i){
		//
		  var imgSrc = this.src;
		  var FBstaticImage = 'static';
		  var imgSrcSearch = imgSrc.search(FBstaticImage);
					
					if(imgSrcSearch != -1) { // Check if the image url contains the identifier we looking for - if so replace it.
					this.src = 'images/no-image.gif'; ////
					}
	})

But ‘in page’ the src is remains https://graph.facebook.com/106046376093686/picture?type=large.

Is there any way I get get the final src value?

Thanks!

2

You possibly could do this with CSS, by looking at the url and hiding the image where appropriate. You could have your default image as a background on the image container that will show when the facebook image has been hidden.

To hide the default Facebook image, you could try something like

img[src*="s-static"] {display: none;}
3

Thanks.

You think the CSS will ‘see’ the rendered src? Won’t it have the same issue as jquery?

I’ll give it a wirl!

4

I suspect so, although I’m not totally sure of how the page works. But definitely worth a try. Feel free to post a live link if you want us to look further. :slight_smile:

I’d love to know how you go with it, anyhow.

5

Ok. Just tested and your css works perfectly go hide the image if I add an image element manually to the page…

<img src="https://s-static.ak.facebook.com/rsrc.php/v1/yA/r/gPCjrIGykBe.gif" >

However, this remains untouched.

<img src="https://graph.facebook.com/104073202962718/picture?type=large" >

If I use Chromes inspector I can see the img element is ‘pre-coversion’ to the static url.

Hmmmm not sure it can be done client side.

6

OK, as I say, I’m not really clear on what’s happening on your page, but with CSS, the idea is to set a rule to target whatever ends up on the page once it’s loaded. So if the final URL is

https://graph.facebook.com/104073202962718/picture?type=large

img[src*="graph.facebook"] {display: none;}

or something similar. The idea here is to choose something in the URL that only appears for the default Facebook images, as you don’t want to hide proper avatars.

7

Yeah thats the problem. They are all unique until they hit facebooks server then they are converted somehow. Sadly the element on the page stays the same / does not seem to change the scr but rather what’s inside it.

I can’t post my page but you can see whats happening from the code I have posted above.

8

I can’t, really. I don’t have a clear idea of what you are seeing, so am stabbing in the dark a bit. I am trying to get a sense of what the links to the question mark images look like on your page, and how they differ from links that have avatars you want to keep (if they differ at all). Or are they all the same, and some server-side script serves up something different each time?

9

Sorry. It was pretty late.

I’ll try and post something this morning.