Ad

JavaScript Dynamically Requested Images Gets Me To CORB Error

- 1 answer

I want to load like 100ish pcs images from a folder in the local path. I'm using visual studio, if I enable live reload and test the dynamic load everything works fine, the images are loaded seamlessly. However if I upload my files to the server and look it in real environments I get CORB error from Chrome that says:

"Cross-Origin Read Blocking (CORB) blocked cross-origin response with MIME type text/html. See for more details."

OK I can see in the debug console that my images have got the wrong MIME type. Because in the load of every image I get the following console message: error404wp.html.

I attached a picture from the image headers. I can clearly see that the Content-Type: text/html is wrong. But my image html is looks like this after the load event :

<img class="img-fluid d-block mx-auto" src="/ProductImages/1.jpg" type="image">

Here is one of the pictures header in Chrome console

As you can see I tried type="image". Well that didn't help. I noticed that the server puts additional lines to the src on other images. (Probably because these are not on the same path and it puts some urls before my path when assembling the page) These images are not dynamically loaded from JavaScript and they are working fine.

My main goal is ( which is working in vscode test environment ) to set up a little product Viewer page, and for that I pull the product information from an Excel sheet and the corresponding pictures from the product from a folder. For this, I'm assembling html elements in JavaScript with bootstrap template's help.

The code ugly but works, and it looks like this:

(The Create_Products(); and the Get_Images() are running <body onload=""> )

function Get_Data(){
    for(var i = 0; i < Devicess.length;i++){
      if(i < 1){
        document.getElementById(i.toString()).innerHTML = Devicess[i].Producer;
      }else if(i == 1){
        var AlText = "Tipus Név: " + Devices[i-1].Type_name + "<br>" + "Status: " + Devices[i-1].Status + "<br> PCS: " + Devices[i-1].PCS;
        document.getElementById(i.toString()).innerHTML = AlText;
      }
    }
}

var ProductPC = 93;
var images3 = [];
function Get_Images(){
  for(var i = 1; i < ProductPC; i++){
    images3.push("/ProductImages/"+i+".jpg");
  }
  console.log(images3);
}

function Create_Modals(images3){
  var Modal,Content;
  for(var k = 0; k < ProductPC; k++){
    //Content = Create_Modal_Container(k,images3);
    Modal = Create_Modal_Base(k,Create_Modal_Container(k,images3));
    document.body.appendChild(Modal);
  }
}

function Create_Modal_Base(k,Modal_Container){
    var div0 = document.createElement("div");
    var div1 = document.createElement("div");
    var div2 = document.createElement("div");
    var div3 = document.createElement("div");
    var div4 = document.createElement("div");
    var div5 = document.createElement("div");

    var att0 = document.createAttribute("class");
    var att0_1 = document.createAttribute("id");
    var att0_2 = document.createAttribute("tabindex");
    var att0_3 = document.createAttribute("role");
    var att0_4 = document.createAttribute("aria-hidden");

    var att1 = document.createAttribute("class");
    var att2 = document.createAttribute("class");

    var att3 = document.createAttribute("class");
    var att3_1 = document.createAttribute("data-dismiss");

    var att4 = document.createAttribute("class");
    var att5 = document.createAttribute("class");

    att0.value = "portfolio-modal modal fade";
    att0_1.value = "portfolioModal" + (k+1);
    att0_2.value = "-1";
    att0_3.value = "dialog";
    att0_4.value = "true";

    div0.setAttributeNode(att0);
    div0.setAttributeNode(att0_1);
    div0.setAttributeNode(att0_2);
    div0.setAttributeNode(att0_3);
    div0.setAttributeNode(att0_4);

    att1.value = "modal-dialog";
    div1.setAttributeNode(att1);

    att2.value = "modal-content";
    div2.setAttributeNode(att2);

    att3.value = "close-modal";
    att3_1.value = "modal";
    div3.setAttributeNode(att3);
    div3.setAttributeNode(att3_1);

    att4.value = "lr";
    div4.setAttributeNode(att4);

    att5.value = "rl";
    div5.setAttributeNode(att5);

    div4.appendChild(div5);

    div3.appendChild(div4);
    div2.appendChild(Modal_Container);

    div2.appendChild(div3);
    div1.appendChild(div2);
    div0.appendChild(div1);
    return div0;
}

function Create_Modal_Container(k,images3){
    var div0 = document.createElement("div");
    var div1 = document.createElement("div");
    var div2 = document.createElement("div");
    var div3 = document.createElement("div");

    var a0 = document.createElement("a");
    var a1 = document.createElement("a");

    var btn0I = document.createElement("i");
    var btn1I = document.createElement("i");

    var btn0 = document.createElement("button");
    var btn1 = document.createElement("button");

    var btnAT0    = document.createAttribute("class");
    var btnAT0_1  = document.createAttribute("data-dismiss");
    var btnAT0_2  = document.createAttribute("type");
    var btnAT0_3  = document.createAttribute("onclick");
    var btnAT0_4  = document.createAttribute("data-toggle");
    var btnAT0_5  = document.createAttribute("data-target");

    var a0I0    = document.createAttribute("class");
    var a1I1    = document.createAttribute("class");

    a0I0.value = "fas fa-shopping-bag";
    a1I1.value = "fas fa-times";
    btn0I.setAttributeNode(a0I0);
    btn1I.setAttributeNode(a1I1);

    a0.appendChild(btn0I);
    a1.appendChild(btn1I);
    btnAT0.value    = "btn btn-primary";
    btnAT0_1.value  = "modal";
    btnAT0_2.value  = "button";
    btnAT0_3.value  = "Scroll_to_Contact()";
    btnAT0_4.value  = "collapse";
    btnAT0_5.value  = "#tobbtermek";
    btn0.setAttributeNode(btnAT0);
    btn0.setAttributeNode(btnAT0_4);
    btn0.setAttributeNode(btnAT0_5);
    btn0.setAttributeNode(btnAT0_1);
    btn0.setAttributeNode(btnAT0_2);
    btn0.setAttributeNode(btnAT0_3);

    var btnAT1    = document.createAttribute("class");
    var btnAT1_1  = document.createAttribute("data-dismiss");
    var btnAT1_2  = document.createAttribute("type");
    btnAT1.value    = "btn btn-secondary";
    btnAT1_1.value    = "modal";
    btnAT1_2.value    = "button";
    btn1.setAttributeNode(btnAT1);
    btn1.setAttributeNode(btnAT1_1);
    btn1.setAttributeNode(btnAT1_2);

    var btn0_Text = document.createTextNode(" Rendelés");
    a0.appendChild(btn0_Text);

    var btn1_Text = document.createTextNode(" Leírás bezárása");
    a1.appendChild(btn1_Text);

    btn0.appendChild(a0);
    btn1.appendChild(a1);
    var h2 = document.createElement("h2");
    var p = document.createElement("p");

    var img = document.createElement("img");
    var p2 = document.createElement("p2");

    var ul = document.createElement("ul");
      var li1 = document.createElement("li");
      var li2 = document.createElement("li");
      var li3 = document.createElement("li");

    var att = document.createAttribute("class");
    var att1 = document.createAttribute("class");
    var att2 = document.createAttribute("class");
    var att3 = document.createAttribute("class");
    var att4 = document.createAttribute("class");
    var att5 = document.createAttribute("class");
    var att6 = document.createAttribute("class");
    var att7 = document.createAttribute("class");

    var att9 = document.createAttribute("src");

    var att10 = document.createAttribute("type");

    att.value = "container";
    div0.setAttributeNode(att);

    att1.value = "row";
    div1.setAttributeNode(att1);

    att2.value = "col-lg-8 mx-auto";
    div2.setAttributeNode(att2);

    att3.value = "modal-body";
    div3.setAttributeNode(att3);

    att4.value = "text-uppercase";
    h2.setAttributeNode(att4);

    att5.value = "item-intro text-muted";
    p.setAttributeNode(att5);

    att6.value = "img-fluid d-block mx-auto";
    att9.value = images3[k];
    img.setAttributeNode(att6);
    img.setAttributeNode(att9);

    att10.value = "image";
    img.setAttributeNode(att10);
    
    var textnode = document.createTextNode("Leírás: " + Devices[k].Comment);
    p2.appendChild(textnode);

    att7.value = "list-inline";
    ul.setAttributeNode(att7);

    var h2_text  = document.createTextNode("Product Desc");
    var Li_Text1 = document.createTextNode("Condition: " + Devices[k].Status);
    var Li_Text2 = document.createTextNode("Price: " + Devices[k].Price);
    var Li_Text3 = document.createTextNode("Category: " + Devices[k].Type_name);

    h2.appendChild(h2_text);
    li1.appendChild(Li_Text1);
    li2.appendChild(Li_Text2);
    li3.appendChild(Li_Text3);
    ul.appendChild(li1);
    ul.appendChild(li2);
    ul.appendChild(li3);

    div3.appendChild(img);
    div3.appendChild(h2);
    div3.appendChild(ul);
    div3.appendChild(p2);
    div3.appendChild(p);
    

    div3.appendChild(btn0);
    div3.appendChild(btn1);

    div2.appendChild(div3);
    div1.appendChild(div2);
    div0.appendChild(div1);
    return div0;
}


function Create_Products(){
  for(var k = 0; k < ProductPC; k++){
    var div0 = document.createElement("div");
    var att0 = document.createAttribute("class");
    att0.value = "col-md-4 col-sm-6 portfolio-item";
    div0.setAttributeNode(att0);

    var a = document.createElement("a");
    var att1 = document.createAttribute("class");
    att1.value = "portfolio-link";
    a.setAttributeNode(att1);

    var att2 = document.createAttribute("data-toggle");
    att2.value = "modal";
    a.setAttributeNode(att2);

    var att3 = document.createAttribute("href");
    att3.value = "#portfolioModal" + (k+1);
    a.setAttributeNode(att3);

    var div1 = document.createElement("div");
    var att4 = document.createAttribute("class");
    att4.value = "portfolio-hover";
    div1.setAttributeNode(att4);

    var div2 = document.createElement("div");
    var att5 = document.createAttribute("class");
    att5.value = "portfolio-hover-content";
    div2.setAttributeNode(att5);


    var i = document.createElement("i");
    var att6 = document.createAttribute("class");
    att6.value = "fas fa-plus fa-3x";
    i.setAttributeNode(att6);

    var div3 = document.createElement("div");
    var att7 = document.createAttribute("class");
    att7.value = "portfolio-caption";
    div3.setAttributeNode(att7);

    var h4 = document.createElement("h4");
    var p = document.createElement("p");

    var P_att = document.createAttribute("class");
    P_att.value = "text-muted";
    p.setAttributeNode(P_att);
    
    var textnode = document.createTextNode(Devices[k].Producer);         // Create a text node
    h4.appendChild(textnode);

    var br = document.createElement("br");

    var textnode1 = document.createTextNode("| Type Name: " + Devices[k].Type_name + " | Status: " + Devices[k].Status + " | PCS: " + Devices[k].PCS + " |");

    p.appendChild(textnode1);

    var img = document.createElement("img");
    var att8 = document.createAttribute("class");
    att8.value = "img-fluid";
    var att9 = document.createAttribute("src");
    att9.value = images3[k];
    img.setAttributeNode(att8);
    img.setAttributeNode(att9);

    div2.appendChild(i);
    div1.appendChild(div2);
    a.appendChild(div1);
    a.appendChild(img);
    div0.appendChild(a);

    div3.appendChild(h4);
    div3.appendChild(p);
    div0.appendChild(div3);
    document.getElementById("test").appendChild(div0);
  }
  Create_Modals(images3);
}

EDIT: I noticed that some images are loaded. And these images are in the same folder and with the same extension as the ones that can't load.

Ad

Answer

The problem was that i push the image URLS like this:

var ProductPC = 93;
var images3 = [];
function Get_Images(){
  for(var i = 1; i < ProductPC; i++){
    images3.push("/ProductImages/"+i+".JPG");
  }
}

Now i fill the array like this:

var ProductPC = 93;
var images3 = [];
function Get_Images(){
  for(var i = 1; i < ProductPC; i++){
    var ImageURL = "/ProductImages/"+i+".JPG";
    images3.push(ImageURL);
  }
}

Maybe the problam was the typeof.

Ad
source: stackoverflow.com
Ad