مقدمة
في أعمال التنمية اليومية ، هناك العديد من المتطلبات لعرض بعض الصور على الصفحة. في بعض الأحيان ، يتم تعيين مسار العنوان للصورة بواسطة البرنامج النصي للعميل (قد يتم استرداده من قاعدة البيانات).
هذا هو عصر AngularJS. عندما نريد استخدام AngularJS لعرض الصور على الصفحات ، سنستخدم ببساطة: <img src=”path of image”>.
إذا فكرنا فقط في العرض التقديمي ، فلا شك أنه على ما يرام ، ولكن سيتم عرض خطأ 404 (غير موجود) في وحدة التحكم في المتصفح.
لحل هذه المشكلة ، نحتاج إلى استخدام ng-Src . قبل استخدام ng-Src ، أريد إعادة إنتاج كيفية حدوث هذا الخطأ.
رمز العينة كما يلي:
عينة رمز المصدر
script.js
var testApp = Angular .Module ("TestModule" ، []) .Controller ("TestController" ، function ($ scope) {var animal = {name: "cat" ، color: "white" ، picture:index.html
<html ng-app = "testmodule"> <head> <title> </title> <script src = "scripts/angular.min.js"> </script> <script src = "scripts/js/script.js {{Animal.name}} <br /> color: {{{animal.color}} <br /> <img src = "{{animation في المثال أعلاه ، هناك فئة animal لها ثلاث خصائص: Name Color Picture ، وقد تم تعيين قيم. باستخدام موثق النموذج ، استخدمت هذه الخصائص على الصفحة. للصور ، استخدمت علامة <img> html.
ثم قم بتشغيل هذا المثال ، والتأثير هو كما يلي:
ثم افتح وحدة التحكم في المتصفح وسترى هذا الخطأ.
غير قادر على تحميل المورد: حالة استجابة الخادم هي 404 (غير موجود).
لذا فإن السؤال هو ، لماذا يحدث هذا الخطأ؟ كيف يجب حلها؟
السبب - عندما يتم تحليل DOM ، سيحاول الحصول على الصورة من الخادم. في هذا الوقت ، لم يتم تنفيذ تعبير ملزمة AngularJS {{ model }} على سمة src بعد ، لذلك لم يتم العثور على خطأ من 404.
الحل- إصدار الحل هو: استخدم ng-Src بدلاً من سمة src في الصورة. بعد استخدام هذا التوجيه ، سيتم إصدار الطلب فقط بعد تنفيذ Angular هذا التعبير الملزم.
أمثلة على استخدام NG-SRC هي كما يلي:
<html ng-app = "testmodule"> <head> <title> </title> <script src = "scripts/angular.min.js"> </script> <script src = "scripts/js/script.js {{animal.name}} <br /> color: {{Animal.Color}}} <br /> <img ng-src = "{{{animal.picture}}" /> </viv> </body> </html> الآن بعد أن فتحت وحدة التحكم في المتصفح مرة أخرى ، لن يظهر: 404 غير موجود ، وذلك لأن ng-Src يستخدم.
تعريف
ng-Src- -هذا التوجيه يتجاوز السمات الأصلية src لعنصر <img /> .
لخص
ما سبق هو المحتوى الكامل لهذه المقالة. أتمنى أن تعجبك. إذا كان لديك أي أسئلة ، فيمكنك ترك رسالة للتواصل.