HtmlDialog - Is not loading images from aws s3 bucket

Hi there, we are working on a plugin that list a lot of materials, so we built a grid with a lot images and materials specs. It’s a webpage that we load in a HtmlDialog. On browser it’s working like a charm, but inside the Sketchup (HtmlDialog) the images does not load. Follow some images:

Inside Sketchup:

Outside Sketchup: Capturar2

Anyone know what’s going on? hahaha

Can you pare down and post a minimal example that others can test ?
(Best if packaged as SketchupExtension in a RBZ zip file.)

In devtools, click on “Console”. What does it say?
Also, click on a request and see the result. What does it say?

Yes Dan, but the problem appear only for some users :sweat_smile: hahaha
I’ll send the .rbz and console print as Kengey ask.

thanks guys!

Hi Kengey, thanks for reply!!
Console nothing, on network tab the requests are “cancelled”!

Hello Diego,

If you are still listening, or anyone,
Is your grid still working?

I am trying to layout some items in a grid with HTMLDlg but the divs take up full width.
The page displays as expected with Firefox

      dlg_optns = {

        :dialog_title => 'Polyhedron Options',
        :width => 800,
        :height => 650,
        :resizable => false,
        :style => UI::HtmlDialog::STYLE_DIALOG

      dlg_html = <<-HTML

          <meta charset="UTF-8"> 


            body {
              font-family: Verdana, sans-serif; 
              font-size: 100%;
              overflow: hidden;
            input[type=button] {
              width: 150px;
              height: 25px;
              float: none;

            .grid-container {
              display: grid;
/*              grid-template-columns: 30px 80px 30px 80px 30px 80px;*/
              grid-template-columns: auto auto auto auto;
            .grid-item-label {
              color: darkblue;
              font-size: 0.875em;
              text-align: center;
            .grid-item-input {
              color: red;
              font-size: 0.875em;


          function cancel_dlg() {sketchup.cancel_dlg() }

          document.onkeydown = function(evt) {
            evt = evt || window.event;
            if (evt.keyCode == 13) {
            if (evt.keyCode == 27) {


          <div class="grid-container">
            <div class="grid-item-label">1:</div>
            <div class="grid-item-input">test 1</div>
            <div class="grid-item-label">2:</div>
            <div class="grid-item-input">test 2</div>
            <div class="grid-item-label">3:</div>
            <div class="grid-item-input">test 3</div>
            <div class="grid-item-label">4:</div>
            <div class="grid-item-input">test 4</div>
            <div class="grid-item-label">5:</div>
            <div class="grid-item-input">test 5</div>
            <div class="grid-item-label">6:</div>
            <div class="grid-item-input">test 6</div>
            <div class="grid-item-label">7:</div>
            <div class="grid-item-input">test 7</div>
            <div class="grid-item-label">8:</div>
            <div class="grid-item-input">test 8</div>
            <div class="grid-item-label">9:</div>
            <div class="grid-item-input">test 9</div>
            <div class="grid-item-label">10:</div>

          <div style="text-align: center">

            <input type="button" value="Create Model" onclick="send_dlg_optns()">
            <input type="button" value="Cancel" onclick="cancel_dlg()">




      dlg_model_optns2 =


    end # html_dlg_model_options2(model_optns)

No errors shown in DevTools…

Maybe this is an issue with firewall blocking? Either corporate network, or national firewalls - some countries block large IP ranges that affect popular server services like AWS, DigitalOcean etc.

I’d recommend working with the affected users to hear if they know of any firewall, and also check with where in the world they are located. You might see a pattern that gives a clue.

1 Like