إضافة خلفية من خلال background-image في Vue

لإضافة صورة كخلفية (background-image) باستخدام bg-url في Vue فإن ذلك يتم  بنفس طريقة CSS العادية.

الطريقة الأولى بداخل ملف CSS خارجي أو <style>

<template>
  <div class="img"></div>
</template>

<style scoped>
.img {
  width: 300px;
  height: 200px;
  background-image: url('@/assets/img.jpg');
  background-size: cover;
  background-position: center;
}
</style>

وإن @/assets/my-image.jpg هي اختصار ل src/assets/my-image.jpg وهذا الأمر إذا كنت تستخدم Vue CLI أو Vite.

 الطريقة الثانية بإستخدام binding داخل style في الـ template فلو أردت أن تجعل الخلفية ديناميكية أي تتغير حسب البيانات مثلا يمكنك استخدام binding:

<template>
  <div :style="bgStyle" class="img"></div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: require('@/assets/img.jpg'), // أو import
    };
  },
  computed: {
    bgStyle() {
      return {
        backgroundImage: `url(${this.imageUrl})`,
        backgroundSize: 'cover',
        backgroundPosition: 'center',
      };
    },
  },
};
</script>

<style scoped>
.img {
  width: 300px;
  height: 200px;
}
</style>

الطريقة الثالثة يمكنك وضعها مباشرة داخل ال template :

<template>
  <div
    class="img"
    :style="{ backgroundImage: `url(${require('@/assets/img.jpg')})` }"
  ></div>
</template>