<!DOCTYPE html>
<body>
<div id="app">
<img src="./Users/ivyone/Desktop/bg.jpeg" v-img>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vm = Vue.createApp({
data() {
return {
}
}
}).mount('#app')
</script>
</body>
</html>
正确的
<!DOCTYPE html>
<style>
div{
width: 567px;
height: 567px;
}
</style>
<body>
<div id="app">
<div v-img="'/Users/ivyone/Desktop/bg.jpeg'"></div>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
});
app.directive('img', {
mounted: function(el, binding) {
let color = Math.floor(Math.random() * 1000000);
el.style.backgroundColor = '#' + color;
let img = new Image();
img.src = binding.value;
img.onload = function() {
el.style.backgroundImage = 'url(' + binding.value + ')';
}
}
})
app.mount('#app')
</script>
</body>
</html>