لا يمكن تحميل ملفات jpg المحلية في مشروع angularjs الخاص بي

Question

لقد بدأت مشروعًا صغيرًا لتطبيق angularjs باستخدام yeoman's generator-angular.

عند إضافة ملفات jpg إلى مجلد التطبيق/الصور، ومحاولة استخدام علامة تربط بأحد ملفات jpg هذه، فإنها لا تظهر في المتصفح.

عند استخدام ملفات png، كل شيء على ما يرام (باستخدام نفس المسار المطلق /images/image.png و /images/image.jpg).إذا استخدمت عنوان URL بعيدًا لملف jpg، فكل شيء يعمل بشكل جيد.

ما الذي أفتقده هنا؟لدي نفس المشكلة باستخدام العلامة.عند استخدام مسار مطلق محلي، فإنه لا يعمل وعندما أستخدم عنوان URL بعيدًا، يكون كل شيء على ما يرام.

شكرا جزيلا على وقتك والمساعدة.

Answer 1

هل تستخدم HTML5Mode؟إذا كان الأمر كذلك، وإذا كنت تستخدم Connect-Modwrite لإعادة كتابة عناوين URL إلى index.html، فتأكد من استبعاد ملفات JPG و JPEG.واجهت مؤخرا نفس المشكلة ولم أدرك أن قاعدة إعادة الكتابة الخاصة بي كانت باستثناء صور PNG ولكن ليس JPEG.

Answer 2

تحتاج إلى استخدام التعبير الزاوي {{}} ل ng-src للعمل.

على سبيل المثال، باستخدام علامة HTML هذه:

<div ng-controller="MyCtrl">
  <img ng-src="{{ path }}" />
</div>

مع وحدة تحكم مثل:

function MyCtrl($scope) {
    $scope.path = 'https://si0.twimg.com/profile_images/';
};

سيسمح لـ angular بالتحميل والقيام بسحره ثم الرجوع بشكل صحيح إلى مصدر الصورة من ملف path المتغير الموجود في $scope من وحدة التحكم.

بخلاف ذلك، تحاول الصورة التحميل من ملف src السمة لم يتح لها الوقت للحصول على قيمة بعد.

العرض التوضيحي في المكبس: http://plnkr.co/edit/6jMDp96we0S7DGyGTtxw?p=preview