#html #responsive-images
#HTML #отзывчивые изображения
Вопрос:
Я пытаюсь создать простую HTML-страницу для реализации адаптивных изображений для практики.
Это весь мой код:
<HTML>
<head>
<title>Practice</title>
</head>
<body>
<h1>Sample Header</h1>
<img srcset = "D:Web Projectspraxisimg60.jpg 1723w,
D:Web Projectsplpraxis13.jpg 2400w"
sizes="(max-width: 1000px) 1723px,<!--I assume that this tells the browser to load the smaller image if browser's width is less than 1000px-->
2400px"
src="D:Web Projectspraxisimg13.jpg"
alt="Sample alternative">
</body>
</HTML>
Когда я открываю эту веб-страницу, она просто показывает увеличенное изображение (D:Web Projectspraxisimg13.jpg) даже после изменения размера окна браузера до небольшой ширины. В консоли я получаю два сообщения об ошибках:
- Ошибка синтаксического анализа значения атрибута srcset, поскольку оно имеет неизвестный дескриптор.
- Удален кандидат srcset «D:Web «
Поиск в Интернете через другие решения показывает, что обычно это неправильный URL-адрес источника изображения, неправильное форматирование srcset. Я не могу понять, где мой код идет не так.
Комментарии:
1. Конечно,
D:` is not recognized as a valid scheme here, tryfile://` вместо этого или даже лучше, запустите локальный сервер.2. @Kaiido Но оно показывает изображение, даже когда используется ‘D:’
3. @CharlieKeith Скопируйте URL-адрес из строки URL-адреса при просмотре изображения с помощью
D:..., и вы узнаете.4. @N3R4ZZuRR0 Я изменил URL-адреса, чтобы они выглядели следующим образом ‘file:///D:/Web Projects/pl/img/13.jpg ‘, но теперь загружается только изображение меньшего размера и не изменяется при изменении размера окна.