لدي مشكلة في استقبال رابط الصور

<div class="article" v-for="article in correctArticles" :key="article.id">
      <img :src="article.img" />
      <img src="../../../assets/imgs/users.png" />
      <h2>{{ article.title }}</h2>
      <p>{{ article.body }}</p>
    </div>

عندما اجلب رابط الصورة من قاعدة البيانت بهذا الشكل
../../../assets/imgs/users.png
لا يتعرف عليه يتعامل معه كنص
مع أن

<img src="../../../assets/imgs/users.png" />

هذه تعمل بشكل نظامي
أنا اخزن الصر على مجدل في مسار المشروع

3 Likes

جرب هذه:

<img src="@/assets/imgs/users.png" />
1 Like

لم يجدي

1 Like

شغال بـ vue cli؟

1 Like

نعم cli

1 Like

ممكن تخلي الصورة داخل فولدر assets مباشرة:

<img src="@/assets/users.png" />
or
<img src="../../../assets/users.png" />

وإذا لم تعمل، يمكنك وضع الصورة داخل الـpublic folder…
webpack لا يعالج الصور داخل ملف public

2 Likes

نعم عندما نقلت لل public وغيرت المسار

assets/imgs/1.jpg

مشي الحال
شكراً نصر :heart::heart::tulip:

2 Likes

لانك تستخدم data property عشان تجيب الصورة إستخدم require() مثلاً

<img :src="require(article.img)" />

جرب وقول لي النتيجة

1 Like

جربت مسبقاً لكن هنا لم يتعرف عليها بينما حين وضعتها في متغير مستقل اشتغلت بشكل نظامي

1 Like

مافهمت عليك وضح لي بالاكواد :smile:

حينما وضعتها هنا لم يتعرف عليها

1 Like

اما حينما عرفت متغير مستقل

img:require("../../imgs..")

ووضعت المتغير في src اشتغل بشكل نظامي

1 Like

جرب التالي:

  • اعمل method تعمل load للصورة، مثلاً
srcRequest(path){
   require(path)
}

وبعدين

<img :src="srcRequest(article.img)" />

جربت
المشكلة انه داخل البايند :src لا يقبل اي دوال

1 Like

طبعاً هون الدالة بتعمل return

1 Like

المشكلة هذه بسبب انك بتجيب رابط من الـ data بشكل ديناميكي وبدك تعمل له binding للـ src لهذا يا اما إنك تخزن اسم الصورة + امتدادها فقط (users.png مثلاً) بقاعدة البيانات وبعدين في الواجهه تعمل method بالشكل التالي:

<img :src="image(article.img)" />
image(imgName){
       return require(`../../assets/${imgName}`)
}

أو الطريقة الأصح:

في قاعدة البيانات خزن اسم الصورة فقط، وبعدين جيب رابط الصورة من السيريلايزر بحيث يكون رابط مش relative يعني ما يكون

../../static/imagename.png

بل يكون رابط absolute

http://127.0.0.1:8080/static/imagename.png

وتستخدمه بشكل عادي

<img :src="article.img" />

وعلشان يكون الرابط مضبوط سوا على الـ local او السيرفر بإمكانك في ملف الـ urls.py اذا بتستخدم الجانقو مثلاً تعمل الشرط كالتالي:

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL,
                          document_root=settings.MEDIA_ROOT)

بحيث يا اما يجيب رابط الـ localhost او رابط الدومين …

1 Like

في الجانب الاخر هي الطريقة الي سويتها بنقل الصور للـ public هي راح تشتغل معك بس ما ينصح بهذا الشئ كون ان الصور ماراح يتم معالجتها في اي مرحلة بإستخدام ال webpack على سبيل المثال لو افترضنا بانك ترغب بضغط الصور وما خلافة

1 Like

ساجرب الطرق اعلاه اذا

1 Like

هذه الطريقة نجحت مع انني قمت بها سابقا ولم تنجح :laughing::star_struck: