我有一张图片，需要根据宽度和屏幕分辨率加载不同的CDN文件。这就是我的操作方式。
new Vue({
components: {
Multiselect: window.VueMultiselect.default
},data: {
customer_last_name: '',customer_first_name: '',customer_email: '',options: [{"uid":"1","firstname":"John","lastname":"Doe","email":"johndoe@aol.com","phone":null,"c_organization":"ACME","c_title":null},{"uid":"2","firstname":"Mary","lastname":"Smith","email":"msmith@aol.com","c_organization":"NBA","c_title":"Miss"},{"uid":"3","firstname":"Mike","lastname":"Verlander","email":"asdafsdf@aol.com","c_organization":"MLB","c_title":"Mr"}]
},methods: {
addTag (newTag) {
const parts = newTag.split(',');
const tag = {
uid: this.options.length + 1,firstname: parts.pop(),lastname: parts.pop()
}
this.options.push(tag)
this.customer_last_name = tag;
},customerSelectName (option) {
return `${option.lastname},${option.firstname}`
},onSelect (option,uid) {
console.log(option,uid)
}
}
}).$mount('#app')
问题是w3 validator doesn't like抛出并出错：Bad value for attribute sizes on element img on w3 validator
因此，我想知道是否有其他方法可以实现相同的目的，基本上我需要加载一个不同的图像，而无需在<img
class="polaris__image lazyload"
alt=""
height="188"
role="presentation"
sizes="(max-width: 768px) 321px,(min-width: 768px) 407px,(max-width: 768px and min-resolution: 2dppx) 642px,(min-width: 768px and min-resolution: 2dppx) 814px,321px"
src="https://media.itpro.co.uk/image/upload/t_card-mobile@1/v1570816514/itpro/2019/04/arcserve_udp_9240dr.jpg"
srcset="https://media.itpro.co.uk/image/upload/t_card-mobile@1/v1570816514/itpro/2019/04/arcserve_udp_9240dr.jpg 321w,https://media.itpro.co.uk/image/upload/t_card-desktop@1/v1570816514/itpro/2019/04/arcserve_udp_9240dr.jpg 407w,https://media.itpro.co.uk/image/upload/t_card-mobile@2/v1570816514/itpro/2019/04/arcserve_udp_9240dr.jpg 642w,https://media.itpro.co.uk/image/upload/t_card-desktop@2/v1570816514/itpro/2019/04/arcserve_udp_9240dr.jpg 814w" width="321"
/>
属性中指定复合媒体查询（例如(min-width: 768px and min-resolution: 2dppx)）。有想法吗？