Passing parameter in onerror event

JavaScript
1

I have got the following code

            var popup = new mapboxgl.Popup()
                .setHTML('<div style="padding:0.3rem 0.3rem 0;text-align:center;">'
                + '<h2 style="font-size:16px;margin:0 0 0.3rem;">' + marker.properties.valor + '</h2>'
                + '<h4 style="font-size:12px;margin:0 0 0.3rem;">' + marker.properties.corredor + '</h4>'
                + marker.properties.enlace + '<img onerror="this.onerror=null;this.src=images2020/picSinImagenChica.jpg" src="' + marker.properties.foto + '"></a></div>');

my doubt is how to pass the src parameter in

+ '<img onerror="this.onerror=null;this.src=images2020/picSinImagenChica.jpg" src="' +

I tried

+ '<img onerror="this.onerror=null;this.src="images2020/picSinImagenChica.jpg" " src="' +

or

+ '<img onerror="this.onerror=null;this.src=""images2020/picSinImagenChica.jpg"" " src="' +

or

+ '<img onerror="this.onerror=null;this.src='images2020/picSinImagenChica.jpg' " src="' +

But it seems to me none is working as expected.

2

Hi @Corobori, you need to escape the quotes inside the onerror value for this to work:

var html = '<img src="..." onerror="this.onerror=null;this.src=\'https://placekitten.com/200/300\'">'
3

Hi m3g4p0p,

Thank you, this solved this issue but I bumped into another one.

In the case shown below, where inside a script I am creating HTML code on the client side escaping didn’t work

 vLinea += "  <img onerror='this.onerror=null; this.src=\'images2020/picSinImagenChica.jpg\' ' src='" + pData.Pr_Imagen + "' alt='" + pData.Pr_Titulo + "'> "

And this neither:

    vLinea += "  <img onerror='this.onerror=null; this.src='images2020/picSinImagenChica.jpg' ' src='" + pData.Pr_Imagen + "' alt='" + pData.Pr_Titulo + "'> "

And this neither:

 vLinea += "  <img onerror='this.onerror=null; this.src=images2020/picSinImagenChica.jpg ' src='" + pData.Pr_Imagen + "' alt='" + pData.Pr_Titulo + "'> "
4

You swapped the single and double quotes here; the (escaped) quotes inside the onerror value have to be different from the quotes around that value.

5

Thank you m3g4p0p, got it working now. Here is the answer in case somebody bumps into the same issue (I bet I will look into it myself one day too !!)

 vLinea += "  <img onerror='this.onerror=null; this.src=\"images2020/picSinImagenChica.jpg\" ' src='" + pData.Pr_Imagen + "' alt='" + pData.Pr_Titulo + "'> "
1 Like
6

Is there any reason you are not using template literals?

const popup = new mapboxgl.Popup()
  .setHTML(`
    <div style="padding:0.3rem 0.3rem 0;text-align:center;">
      <h2 style="font-size:16px;margin:0 0 0.3rem;">${marker.properties.valor}</h2>
      <h4 style="font-size:12px;margin:0 0 0.3rem;">${marker.properties.corredor}</h4>
      ${marker.properties.enlace}
      <img onerror="this.onerror=null;this.src=images2020/picSinImagenChica.jpg" src="${marker.properties.foto}">
    </div>
  `);

The above should be functionally equivalent to what you posted in the first post, but is much easier to read / maintain.

Also, you seem to have a stray closing </a> tag in there.

1 Like
7

Lack of knowledge would be the answer James, nothing more. I will have a look into it. Thank you for helping improving my skills :smiley:

The closing </a> tag does exist in the real script, I just didn’t copy it in the post.

8

No worries :slight_smile: They’re not supported in Internet Explorer, so you should bear that in mind. But as long as you don’t have to support IE, they should be a drop in replacement.

1 Like
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.