Whats नए Angular में ngSrc के बराबर है?

Question

मैं JSON ऑब्जेक्ट से आने वाले src के साथ img को लागू करना चाहूंगा।

AngularJS में, मैं कर सकता था:

<img ng-src="{{hash}}" alt="Description" />

क्या एंगुलर 2+ में इसके बराबर कोई है?

Answer 1

AngularJS:

<img ng-src="{{movie.imageurl}}">

कोणीय 2+:

<img [src]="movie.imageurl">

कोणीय डॉक्स

---

ध्यान दें कि प्रक्षेप एक ही परिणाम प्राप्त कर सकता है:

<img src="{{vehicle.imageUrl}}">

<img [src]="vehicle.imageUrl">

प्रॉपर्टी बाइंडिंग के लिए इन दो वक्तव्यों में कोई तकनीकी अंतर नहीं है, जब तक कि आप दो तरफ़ा बाइंडिंग की इच्छा नहीं रखते हैं।

कई मामलों में संपत्ति के बंधन के लिए प्रक्षेप एक सुविधाजनक विकल्प है। वास्तव में, कोणीय दृश्य प्रस्तुत करने से पहले उन प्रक्षेपों को संबंधित संपत्ति के बंधनों में बदल देता है। स्रोत

Comments

तो, यह एनजी-एसकेसी के बराबर नहीं है, क्योंकि एनजी-एसकेसी से पहले लोड छवि से बचा जाता है एनजी-एसकेसी का एक मूल्य है

— सेबेस्टियन रोजस

जैसा कि सेबस्टियन ने बताया! यह समान नहीं है क्योंकि video/audioकुछ और जैसे तत्वों का attributesकोई मूल्य नहीं होना चाहिए । ng-srcइसके बराबर नहीं है[src]

— निखिलेश शिवरात्रि

Answer 2

यह अपने कोणीय अनुप्रयोग में ng-src की समान कार्यक्षमता को प्राप्त करने के लिए दो-चरण की प्रक्रिया है।

पहला कदम:

अपने HTML में, नए सिंटैक्स का उपयोग करें:

<img [src]="imageSrc">

दूसरा कदम:

अपने घटक / निर्देश में, खाली होने के लिए मूल्य को इनिशियलाइज़ करें । उदाहरण के लिए:

@Component({
  selector: 'ag-video',
  templateUrl: './video.component.html'
})
export class SampleComponent {
   imageSrc = '';
}

अब, यह nullतत्व पर सेट नहीं होने के कारण नेटवर्क कॉल (खाली कॉल) को समाप्त कर देगा ।

Answer 3

इसे प्रक्षेप रूप में भी लिखा जा सकता है जैसे:

<img src="{{movie.imageurl}}">

Comments

क्यों नहीं?? 54321

— बर्थो बर्नसमैन

Answer 4

<tr *ngFor="let post of posts | paginate: { id: 'server', itemsPerPage: 
       10, currentPage: p , totalItems: count  }">

   <td>
    <img src="https://img.youtube.com/vi/{{post.youtubeVideoId}}/default.jpg">
   </td>

   <td>
     {{post.videoName}}
   </td>

</tr>

Comments

डाउनवोट किया गया क्योंकि यह अनुशंसित समाधान नहीं है क्योंकि यह एक विफल अनुरोध बनाता है: img.youtube.com/vi {{post.youtubeVideoId}} / default.jpg।

— जेमी

एक असफल अनुरोध बनाता है! माना।

— निखिलेश शिवरात्रि