عدم ظهور الصورة في مشروع Vue

هل الملف image.jpg موجود في مجلد assets ؟ إذا لم يكن موجودا يرجى وضعه والتأكدم من الإسم الصحيح .

إذا إستمرت المشكلة يرجى إرفاق ملفات المشروع بأكملها ماعدا مجلد node_modules وإرفاقها هنا بعد ضغطها ويرجى عدم إرفاق مجلد src فقط بل جميع الملفات أى مجلد المشروع الرئيسي.

غالبًا لديك مشكلة في المسار، يجب أن يكون اسم الملف هو image.jpg تمامًا كما كتبته، لو الاسم Image.jpg بحرف I كبير أو image.JPG، فلن يعمل المسار، وللعلم أنظمة التشغيل مثل ويندوز لا تفرق بين الحروف الكبيرة والصغيرة، لكن سيرفر التطوير والخوادم الحقيقية تفرق.

أيضًا يجب أن يكون الملف موجود مباشرة داخل مجلد src/assets.

في حال استمرت المشكلة، اضغط Ctrl + C لإيقاف السيرفر في نافذة الـ Terminal، ثم أعد تشغيله مرة أخرى باستخدام الأمر npm run serve.

والأفضل بدلًا من وضع المسار مباشرة في الـ CSS، هو استيراد الصورة في جزء الـ <script> ثم نربطها كـ style مباشرة على العنصر، وذلك من خلال import، حيث أداة البناء Webpackأو Vite تفهم أن الملف يجب معالجته، فتقوم بنسخه إلى مجلد البناء النهائي dist وتعطيك المسار الصحيح والنهائي له، وذلك يمنع حدوث أي مشاكل في المسارات.

كالتالي:

<template>
  <div class="my-main" :style="{ backgroundImage: 'url(' + imageUrl + ')' }">
  </div>
</template>

<script>
import imageFile from '@/assets/image.jpg';

export default {
  name: 'MyMain',
  data() {
    return {
      imageUrl: imageFile
    }
  }
}
</script>

<style lang="scss" scoped>
.my-main {
  width: 100%;
  min-height: 400px;
  background-size: cover;
  background-position: center;
}
</style>