1

How do I include the css style background-image:url('') in a jquery string. This string breaks at the url('

 var img=field.img;
 $(".wrapper").append("<div class='slide bgimage' style='background-image: url('img/" + img + ".jpg');'></div>");
obreezy
  • 303
  • 1
  • 5
  • 18

3 Answers3

1

The string breaks because the opening single quotation mark after [style=] ends at [url(]. Since the string already contains both single quotation marks aswell as double quotation marks, you have to escape the 3rd.

Change

You should change the code from

$(".wrapper").append("<div class='slide bgimage' style='background-image: url('img/" + img + ".jpg');'></div>");

to

$(".wrapper").append("<div class='slide bgimage' style='background-image: url(\"img/" + img + ".jpg\");'></div>");

Example

var field = {
 img: "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/140626_Tierser_Alpl_Rossz%C3%A4hne.jpg/245px-140626_Tierser_Alpl_Rossz%C3%A4hne"
}

var img=field.img;
 $(".wrapper").append("<div class='slide bgimage' style='background-image: url(\"" + img + ".jpg\");'></div>");
.slide {display:inline-block;width:400px;height:400px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper"></div>
Richard
  • 390
  • 3
  • 10
1

You can utilize jQuery(html, attributes). Note, quotes are not necessary for URL within css url() function.

$(function() {

  var field = {
    img: "http://placehold.it/100x100"
  }
  var img = field.img;

  var div = $("<div></div>", {
    "class": "slide bgimage",
    "style": "background-image: url(" + img + ")"
  });

  $(".wrapper").append(div);

});
.wrapper,
.wrapper div {
  width: 100px;
  height: 100px;
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="wrapper"></div>
guest271314
  • 1
  • 15
  • 104
  • 177
  • +1, this is the way to go imo, but remember that `class` is a reserved keyword, and should always be quoted. – adeneo Oct 23 '16 at 23:59
  • @adeneo _"but remember that `class` is a reserved keyword, and should always be quoted."_ Previously had the same consideration, though was corrected. Will try to locate the exchange – guest271314 Oct 24 '16 at 00:03
  • @adeneo http://stackoverflow.com/a/36638058/ , http://stackoverflow.com/q/4348478/. Updated post to include quotes anyway. – guest271314 Oct 24 '16 at 00:16
  • 1
    I'll strongly disagree with Mathias Bynens on that one. The [**specs**](http://www.ecma-international.org/ecma-262/5.1/#sec-7.6) clearly states that *"An Identifier is an IdentifierName that is not a ReservedWord"* and it goes on to list `class` as one of the reserved words that an Identifier name can not be. Sure, it works in all modern browsers, but so do a lot of other things one should generally avoid doing. – adeneo Oct 24 '16 at 00:26
  • He also goes on to [argue](https://mathiasbynens.be/notes/javascript-identifiers) on his blog that identifiers and identifier names aren't neccessarely the same thing, and that all though reserved words can't be used in variables, they are fine as object keys (identifier names). I'm not sure if his right or not, but it sounds very strange to me, and I think he's reading that wrong, an identifier is a ES "token", wether it's a variable or property name, and both have an identifier name that can not be a reserved keyword, or at least, so I think? – adeneo Oct 24 '16 at 00:40
  • @adeneo Can post a Question as to the topic to gather further input on the matter, if you believe it will be helpful in resolving what is correct or incorrect, or which portions of interpretations or specifications appear to be grey. – guest271314 Oct 24 '16 at 00:44
  • @adeneo http://stackoverflow.com/questions/40209367/do-reserved-words-need-to-be-quoted-when-set-as-property-names-of-javascript-obj – guest271314 Oct 24 '16 at 00:55
  • Oh, you're fast. It's going to be interesting to see if anyone actually can point to something explaining the difference between "identifier" and "identifier name" and how it relates to variable and property names – adeneo Oct 24 '16 at 00:58
  • @adeneo Well, seeking clarity to avoid confusion. Will duck when the first flurry of "downvotes" and "duplicate" responses arrive; though perhaps we will actually garner an accurate Answer or two to resolve the Question. – guest271314 Oct 24 '16 at 01:01
0

Its not a good practice to insert/append a div element like that you might consider changing into this format

var img=field.img;
var imgUrl='img/' + img +'.jpg';
var divElement=jQuery("<div>");
divElement.addClass('slide');
divElement.addClass('bgimage');
divElement.css('background-image',imgUrl);
 $(".wrapper").append(divElement);

Hope it helps

Geeky
  • 7,420
  • 2
  • 24
  • 50