Spacebars and inline styles?


#1

Hi guys. Is it possible to insert spacebars template tags into an inline style?
I have this code working no problem:

<img src="{{getProfileImg}}">

But it doesnt work when used inline.

<div style="background-image: url({{getProfileImg}})"></div>

Any ideas? Thanks :+1:


#2

But it doesnt work when used inline.

Could you be a little more specific? What happens in your example, exactly?

I’ve just done a quick test using your exact markup and using a known, populated object in place of your getProfileImg and it works as expected for me:

<div style="background-image: url({{currentUser.profile.name}})">hi</div>

Outputs:

<div style="background-image: url(Nathan Hornby)">hi</div>

#3

The image doesnt show up lol. There’s no issue displaying the image when its in a plain img tag. But inline = no dice.

helpers

Template.registerHelper('getProfileImg', function(userId) {
  var img = UserImages.findOne({userId: userId});
  if (img) {
    return img.image;
  } else{
    return "img/noimage.jpg";
}      

});

events

Template.profile.events({
	"submit .edit-profile": function(event){
		var file = $("#profileImage").get(0).files[0];
		if (file) {
			fsFile = new FS.File(file);
			ProfileImages.insert(fsFile, function(err, result) {
				if (err)
					throw new Meteor.Error(err);
				else {
					var imageLoc = 'cfs/files/ProfileImages/' + result._id;
					UserImages.insert({
						userId: Meteor.userId(),
						username: Meteor.user().username,
						image: imageLoc
					});
					Router.go('/');
				}
			});
		}
		return false;
	}
});

#4

If you’d like I can explain why Im trying to do this. Perhaps there’s a better solution.


#5

What do you see when you inspect the DOM? Is it not outputting a value at all? If it’s outputting in one then it should be outputting in another, especially as you don’t seem to have locked the helper to a template (that would have been my other guess, wrong template).

Unfortunately my advice isn’t worth a great deal as I’m also a beginner with Meteor, so I’ll let someone else comment on your general approach :slight_smile: But from my perspective the helper looks fine.


#6

My guess would be that your browser only looks for images at render-time, and doesn’t care when you change the src tag later, when you have the data available. What if you wrapped your img tag in its own template,

<template name="profileImage">
    <img src="{{profileImgUrl}} />
</template>

Then include it in your normal template

{{> profileImage profileImgUrl=myProfileUrl}}

If that doesnt work, try wrapping the inclusion in an {{#if myProfileUrl}} to be sure the url exists before trying to render the image template


#7

No output. That’s cool man, thanks for the help anyway :grinning:


#8

Ahh genius. Gonna give that a go now. Thanks!


#9

Just make sure that your helper actually returns a value, otherwise nothing you do in the template will work :smile:


#10

Good call - The value I checked with would have been available right away, so not the best test!

However given that @wonderjunky said that the <img /> tag worked, only the inline style attempt didn’t, wouldn’t that indicate that the helper returning a value isn’t the issue?


#12

That’s exactly what I was just going to clarify. Seems no issue with the helper ya?


#13

Seems like that. I originally read your question wrong, and thought that neither the img tag nor the div tag worked. I would also make sure, as @nathanhornby said, that when you inspect the DOM with chrome dev tools for example, that your background tag is being interpreted correctly.