How can I make it recognize "/" when concatenating with javascript?

Navigation
3

It turns out that I can not make it show me as a url when I concatenate the url images/ that is the folder that I have to put images, the code that armo is the following. 

carouselImagen+= '<div class="carousel-item active" id="plantillaCarousel">'+
                    '<div class="view" style="background-image: url("images/'+data.carousel[i].imagen+'"); background-repeat: no-repeat; background-size: cover;">'+
                    '<div class="mask rgba-black-light d-flex justify-content-center align-items-center">'+
                    '<div class="text-center white-text mx-5 wow fadeIn">'+
                    '<h1 class="mb-4"><strong>'+data.carousel[i].tituloImagen+'</strong></h1>'+
                    '<p class="mb-4 d-none d-md-block">'+
                    '<strong>'+data.carousel[i].descripcion+'</strong></p></div></div></div></div>';

If you see well the part style="background-image: url("images/'+data.carousel[i].imagen+'"); generates it in the following way 

<div class="carousel-item" id="plantillaCarousel">
  <div class="view" style="background-image: url(" images="" 1.jpg");="" background-repeat:="" no-repeat;="" background-size:="" cover;"="">
      <div class="mask rgba-black-light d-flex justify-content-center align-items-center">
          <div class="text-center white-text mx-5 wow fadeIn">
                <h1 class="mb-4">
                <strong>Titulo de Imagen</strong></h1>
                <p class="mb-4 d-none d-md-block">
                <strong>Descripcion de la imagen</strong>
                </p>
          </div>
      </div>
  </div>
</div>

Then I want to know if something should be done to concatenate there

  

PS: I'm using jquery and for the design using material design   Bootstrap oriented

    
asked by Sebastián Lagos Yañez 24.04.2018 в 15:58
source

2 answers

4

The problem is in the line you specify style="background-image: url("images/'+data.carousel[i].imagen+'");

When you put style="background-image:url(" you are closing at this point the style tag with the quotes that you want to use to open the url.

In principle, I have always put the url as such, without quotes or anything but I understand that it is bad practice ... You can do it in the following way:

style="background-image: url(\"images/'+data.carousel[i].imagen+'\");"

By entering \" you indicate that you want those quotes to be part of the string and not that they are the% share% closure.

That should work well with you

    
answered by 24.04.2018 / 16:05
source
3

You can use template literals to make it easier to write the string, since you need both quotes " and ' in addition to concatenating variables: 

carouselImagen +=
  '<div class="carousel-item active" id="plantillaCarousel">
     <div class="view"
       style="background-image: url('images/${data.carousel[i].imagen}'); background-repeat: no-repeat; background-size: cover;">
       <div class="mask rgba-black-light d-flex justify-content-center align-items-center">
         <div class="text-center white-text mx-5 wow fadeIn">
           <h1 class="mb-4"><strong>${data.carousel[i].tituloImagen}</strong></h1>
           <p class="mb-4 d-none d-md-block">
             <strong>${data.carousel[i].descripcion}</strong>
           </p>
         </div>
       </div>
     </div>
   </div>';

Note that the url of background-image remains with the single quotes and the variable is inserted in the middle: 

url('images/${data.carousel[i].imagen}')
    
answered by 24.04.2018 в 16:13
Save classes in CSS delete data from a DataTable ()