Home / Questions / 158733
Accepted
Sebastián Lagos Yañez
Asked: 2020-04-25 05:58:51 +0800 CST 2020-04-25 05:58:51 +0800 CST

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

  • 772

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 I put together 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 the part correctly, style="background-image: url("images/'+data.carousel[i].imagen+'");it generates it for me 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>

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

PS: I am using jquery and for the layout using bootstrap oriented material design

javascript

2 Answers

  1. Best Answer

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

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

    In principle, I have always put the url as it is, 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 putting \"you indicate that you want those quotes to be part of stringand not that they are the closing of style.

    That should work fine for you

    • 4

  2. You can use template literals to make it easier to write the string, since you need both quotes "and 'also concatenate 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>`;

    Notice that the left one is left urlwith background-imagethe single quotes and the variable is inserted in the middle:

    url('images/${data.carousel[i].imagen}')
    • 3