<img src="@assets/images/logo.png" /> это равносильно <img :src="require('@assets/images/logo.png')" /> в рамках Vue шаблонану да, require вообще не для этого нужен, он там ни к чемуа для чего от тогда вообще? Разве не для подключения модулей? В рамках вебпака - все модуль, и картинка тоже.
<script>
export default {
props: {
src: {
type: String,
required: true,
},
},
}
</script>
<template>
<picture>
<source :srcset="srcWebp" type="image/webp" />
<source :srcset="srcJpg" type="image/jpg" />
<img decoding="async" loading="lazy" />
</picture>
</template>export default {
props: {
imgPath: {
type: String,
required: true,
},
},
computed() {
webpPath() {
return require(this.imgPath + '.jpg') // Будет ошибка при попытке require
},
jpgPath() {
return require(this.imgPath + '.webp') // Будет ошибка при попытке require
}
},
}
1) Если я захочу добавить изображениям хэш например, то внутри компонента полное имя картинки я не получу
2) Мелочь, но все же. В таком случае придется написать скрипт который будет require.context подключать все картинки из папки assets
3) Хардкод путей звучит не очень
В любом случае спасибо большое что уделили время, я подумаю над тем что вы предложили