Javascript динамически запрашиваемые изображения приводят к ошибке CORB - PullRequest
Новая
       9

Javascript динамически запрашиваемые изображения приводят к ошибке CORB

0 голосов
/ 21 января 2020

Итак, я хочу загрузить как 100i sh шт изображений из папки по локальному пути. Я использую Visual Studio, если я включаю перезагрузку в реальном времени и тестирую динамическую загрузку c, все работает нормально, изображения загружаются без проблем. Однако, если я загружаю свои файлы на сервер и смотрю их в реальных условиях, я получаю сообщение об ошибке CORB от chrome, в котором говорится: «Блокировка чтения с перекрестного источника (CORB) заблокировала ответ с исходным текстом с текстом MIME типа / html. См. для более подробной информации. "

ОК, я вижу в консоли отладки, что мои изображения имеют неправильный тип MIME. Потому что при загрузке каждого изображения я получаю следующее консольное сообщение: error404wp. html.

Я прикрепил картинку из заголовков изображений. Я ясно вижу, что Content-Type: text / html неверен. Но мое изображение html выглядит так после события загрузки: 

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

Вот заголовок одной из картинок в chrome console

Как вы можете видеть, я попробовал type = "image". Ну, это не помогло. Я заметил, что сервер помещает дополнительные строки в sr c на других изображениях. (Возможно, потому что они не находятся на одном и том же пути, и при сборке страницы перед моим путем ставятся некоторые URL). Эти изображения не загружаются динамически из javascript, и они работают нормально.

Моя главная цель ( который работает в тестовой среде vscode), чтобы настроить небольшую страницу просмотра продукта, и для этого я извлекаю информацию о продукте из листа Excel и соответствующие изображения из продукта из папки. Для этого я собираю html элементов в javascript с помощью bootstrap шаблона.

Код некрасив, но работает, и выглядит это так:

(Create_Products () и Get_Images () работают <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);
}

РЕДАКТИРОВАТЬ: Я заметил, что некоторые изображения загружены. И эти изображения находятся в той же папке и с тем же расширением, что и те, которые не могут быть загружены.

Ответы [ 2 ]

0 голосов
/ 21 января 2020

Проблема заключалась в том, что я пу sh URL-адреса изображения, например: 

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

Теперь я заполняю массив следующим образом: 

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

Возможно, проблам был typeof.

0 голосов
/ 21 января 2020

Прокрутите вверх на вкладке Сеть. Вы увидите запрос для 1.jpg.

Он получает с перенаправлением на error404wp.html, что, в зависимости от имени файла, является страницей с ошибкой 404 Not Found.

(Откровенно говоря, это некорректное поведение, сервер должен просто дать 404 ответ на запрошенный URL-адрес, а не перенаправлять на другой URL-адрес только для показа страницы с ошибкой (тем более что страница с ошибкой, похоже, имеет 200 OK status)).

Вам необходимо использовать URL, который фактически разрешает изображение, к которому вы хотите получить доступ.

...