При загрузке изображения произошла ошибка vs code

Issue Type: Bug

when clicking an image from left panel， there’s a great probability encounter this issue, sometimes when you click another image and then re-click the previous image, you won’t encounter this issue, but, mostly, you still get this issue

and when I click the ‘Open file using VS Code’s standard text/binary editor?’ is useless, nothing happened

VS Code version: Code 1.44.0 (2aae1f2, 2020-04-08T08:23:56.137Z)
OS version: Darwin x64 19.0.0

System Info

Extensions (6)

В vscode с помощью плагина live server работаю с png. Во вкладке открытой с помощью плагина png отображается как надо, а если просто открыть html файл, то просто alt, на хостинге тоже ничего не отображается. Остальные форматы отображаются без проблем.

<img class="light" src="/img/lighwerwerwerwert.png" alt="Светильники">

Пример img

Некоторые изображения накладываются друг на друга слоями с помощью: z-index: х; position: absolute; в частности 2 png + 2 svg. Работает только 1 png + 2 svg вторая png не хочет.
Что делать, как решить?

<img class="light" src="./img/lighwerwerwerwert.png" alt="Светильники">

Немного дополню предыдущего комментатора:
1. если ссылка начинается с «/» — это значит «начать с корня сайта (или диска). например ссылка вида /images/image.png будет искаться либо по адресу site.ru/images/image.png, а локально — относительно того раздела на винте (c:/images/image.png), где находится файл html. При этом не будет браться в расчет путь к каталогу, где находится html. Ссылка получится «абсолютной».
2. если ссылка будет без дроби вначале вида «images/image.png» — путь к изображению будет строиться от места нахождения файла html. Например: файл лежит в каталоге «c:/work/site/index.html», тогда рядом с ним должен находиться каталог images с картинкой, и браузер будет открывать картинку по следующему пути: «c:/work/site/images/image.png».
Ссылка без дроби вначале сработает аналогично «./images…»
точка с дробью принудительно указывает на текущий каталог, в котором лежит файл html. Ссылка получится «относительной» (т.е. будет строиться относительно местонахождения html файла)

live в редакторе позволяет имитировать работу на сайте и подставляет корневой каталог от местонахождения файла html. Если будет более сложная структура — и live может не помочь, если будете так ссылки выстраивать. Для локальной верстки используйте только относительные ссылки. При необходимости обратиться в соседний по уровню вложенности каталог ссылка может начинаться с «../», что укажет браузеру необходимость подняться на один уровень вложенности выше.

Минуточку внимания

Тип проблемы :

Я заметил, что каждый раз, когда я пытаюсь открыть изображение в коде vs, я получаю сообщение об ошибке, указанное в заголовке, независимо от типа файла изображения.

Версия кода VS: Код 1.39.2 (6ab598523be7a800d7f3eb4d92d7ab9a66069390, 2019-10-15T15: 33: 00.827Z)
Версия ОС: Darwin x64 18.7.0

Системная информация

| Товар | Значение |
| — | — |
| Процессоры | Intel (R) Core (TM) i7-6820HQ CPU @ 2,70 ГГц (8 x 2700) |
| Состояние графического процессора | 2d_canvas: включен
flash_3d: включен
flash_stage3d: включен
flash_stage3d_baseline: включен
gpu_compositing: включен
multiple_raster_threads: enabled_on
native_gpu_memory_buffers: включен
oop_rasterization: disabled_off
protected_video_decode: unavailable_off
растеризация: включена
skia_deferred_display_list: disabled_off
skia_renderer: disabled_off
surface_synchronization: enabled_on
video_decode: включен
viz_display_compositor: disabled_off
webgl: включен
webgl2: включен |
| Нагрузка (средн.) | 2, 2, 2 |
| Память (системная) | 16,00 ГБ (6,19 ГБ свободно) |
| Обработка Аргв ||
| Программа для чтения с экрана | нет |
| ВМ | 0% |

Расширения (21)

Расширение | Автор (усечено) | Версия
— | — | —
html-фрагменты | abu | 0.2.1
vscode-browser-preview | auc | 0.5.9
рельсы | булочка | 0.13.1
vscode-gemfile | булочка | 0.0.2
солнечограф | cas ​​| 0.21.1
vscode-eslint | dba | 1.9.1
code-runner | для | 0.9.14
vscode-rufo | jnb | 0.0.1
vscode-gutter-preview | кис | 0.23.0
привязки клавиш атома | ms- | 3.0.6
vsliveshare | ms- | 1.0.1056
отладчик для хрома | msj | 4.12.0
erb | Rie | 0.1.1
LiveServer | rit | 5.6.1
ActiveFileInStatusBar | Ros | 1.0.3
тонкий | sia | 0.1.2
html-превью-vscode | tht | 0.2.5
выделение-сопоставление-тег | vin | 0.9.5
простой-рубин-эрб | вор | 0.2.1
quokka-vscode | Wal | 1.0.257
erb-vscode-snippets | Zne | 0.0.4

@mjbvz Обнаружил, что проблема
Если в имени файла есть символ%, vscode не отображает изображение.

Если я удалю символ% в имени файла, vscode отобразит изображение правильно.

Проверено как в текущей стабильной версии Mac, так и в сборке для инсайдеров.
@aparcanapavel Сообщите нам, если вы наблюдаете ту же закономерность.

Даже если я столкнулся с той же проблемой, и мое имя файла изображения не содержит символа%, решите мою проблему.

Image is not showing in browser using the image tag where am i wrong?
i want to add image in web and i am unable to do it using in visual code i don’t know where from image to be added in the URL of image so anyone guide.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sign up </title>
</head>
<body>
  <div class="Header">
      <a href="/" class="LogoWrapper" >
      <img src="D:my-angular-projectssignup-formsrcimageSnap.jpg" alt="Scone O'Clock logo" />
      </a>
      <p class="Strap">Scones: the most resplendent of snacks </p>
   </div>

        <div class="IntroWrapper">
            <p class="IntroText">
              Occasionally maligned and misunderstood; the scone is a quintessentially British classic.
            </p>
         <div class="MoneyShot">
              <img class="MoneyShotImg" src="D:my-angular-projectssignup-formsrcimage1555932407.jpg" alt="Incredible scones" />
              <p class="ImageCaption">Incredible scones, picture from Wikipedia</p>
         </div>
       </div>
     <p>Recipe and serving suggestions follow.</p>
   <div class="Ingredients">
      <h3 class="SubHeader">
      Ingredients</h3>
      <ul>
     </ul>
    </div>
   <div class="HowToMake">
    <h3 class="SubHeader">Method</h3>
    <ol class="MethodWrapper">
    </ol>
   </div>
</body>

   

 </html>