JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://unpkg.com/vue@next"></script>
<div id="app">
<input v-model="url"><br>
<button @click="addPhoto">Add</button>
<div v-for="photo of photos" class="photo">
<img :src="photo">
</div>
<div v-if="!photos.length">No photos yet</div>
</div>
CSS
.photo {
width: 200px;
height: 200px;
}
img {
height: 100%;
width: 100%;
object-fit: cover;
}
JavaScript
Vue.createApp({
data() {
return {
url: '',
photos: []
};
},
methods: {
addPhoto() {
this.photos.unshift(this.url);
this.url = '';
}
}
}).mount('#app');