Названия типов URL
Надеюсь, это то, что вы имели в виду codepen . Я оставлю все остальное в ваших руках.
Html:
{{card.description}}
js:
new Vue({
el: '#app',
data: () => ({
cards: [
{ title: 'Pre-fab homes', src: 'https://picsum.photos/800/800', flex: 6, description: "Random Image", showDetails: false },
{ title: 'Pre-fab homes', src: 'https://cdn.vuetifyjs.com/images/cards/house.jpg', flex: 6, description: "House Image", showDetails: false },
{ title: 'Favorite road trips', src: 'https://cdn.vuetifyjs.com/images/cards/road.jpg', flex: 6, description: "Road Image", showDetails: false },
{ title: 'Best airlines', src: 'https://cdn.vuetifyjs.com/images/cards/plane.jpg', flex: 6,description: "Plane Image", showDetails: false }
]
})
})
Полный пример
new Vue({
el: '#app',
data: () => ({
cards: [{
title: 'Pre-fab homes',
src: 'https://picsum.photos/800/800',
flex: 6,
description: "Random Image",
showDetails: false
},
{
title: 'Pre-fab homes',
src: 'https://cdn.vuetifyjs.com/images/cards/house.jpg',
flex: 6,
description: "House Image",
showDetails: false
},
{
title: 'Favorite road trips',
src: 'https://cdn.vuetifyjs.com/images/cards/road.jpg',
flex: 6,
description: "Road Image",
showDetails: false
},
{
title: 'Best airlines',
src: 'https://cdn.vuetifyjs.com/images/cards/plane.jpg',
flex: 6,
description: "Plane Image",
showDetails: false
}
]
})
})
{{card.description}}
5 ответов
- Абсолют http://www.example.com/images/icons.png
- Document- Относительный ../images/icons.png
- Root-Relative /images/icons.png
- Protocol-Relative //www.example.com/images/icons.png
Для № 4 я также часто называл их «Протокол-Агностик»
Число 3 также считается относительным. число 4 является абсолютным, но не имеет протокола. Это полезно, если вы хотите иметь доступ к одному и тому же URL-адресу, используя HTTP и HTTPS.
Абсолютные URL полностью определяют местоположение веб-страницы и работают одинаково независимо от того, где вы находитесь в мире.
Относительные URL-адреса являются контекстно-зависимыми, давая путь относительно вашего текущего местоположения.
Абсолютный URL-адрес выдает непосредственно местоположение файла / документа, который вы ищете. пример: "http: /www.otagasue.com/images/coolpics.jpg" Относительные URL-адреса обычно указывают файл / документ относительно текущего местоположения файла. В отличие от абсолютного, это короткие URL-адреса, ссылающиеся на пример корневого каталога ".. .otagasue / pica.jpg "
от Отага.
Тип 1 - это просто «URI» (иногда называемый «абсолютным URI»).
Для типов 2 3 и 4 окончательные ответы содержатся в RFC 3986 , раздел 4.2.
Все они являются «относительными ссылками», но в соответствии с RFC квалифицируются следующим образом:
../ images / icons .png- «ссылка на относительный путь»/images/icons.png- «ссылка на абсолютный путь»//.../icons.png- «ссылка на сетевой путь»
Последний часто используется, если вы хотите указать URL-адрес, содержащий доменное имя, но в котором вы хотите, чтобы протокол соответствовал протоколу, используемому для доступа к текущему ресурсу. Например, если ваши изображения загружаются из CDN,
Тип три является корневым родственником .
Не знаю о 4.