在 AngularJS 中，ng-src 指令用于在 HTML 元素中动态绑定图片的 src 属性。这个指令非常有用，特别是当你需要根据用户输入或者其他动态数据来加载不同的图片时。
使用 ng-src 指令
要使用 ng-src 指令，首先需要引入 AngularJS 库，并将 ng-app 指令添加到你的应用程序的根元素中。然后，你可以在需要动态绑定图片 src 属性的地方使用 ng-src 指令。
-- -------------------- ---- -------
--------- -----
----- --------- ---------------
------
----- ----------------
---------------- --------------
------- ------------------------------------------------------------------------------------
-------
------
---- -----------------------
---- --------------------- ------------ -------
------
--------
--- --- - ----------------------- ----
------------------------ ---------------- -
--------------- - ----------------------------------
---
---------
-------
-------在上面的示例中，我们创建了一个 AngularJS 应用程序，并在控制器中定义了一个 imageUrl 变量，它的值是一个默认的图片 URL。然后，我们在 img 元素中使用 ng-src 指令将这个值绑定到 src 属性上。
动态改变图片 src
一个 ng-src 指令的主要优势是它可以根据控制器中的变量的值来动态改变图片的 src。这样，当用户输入不同的数据或者触发了某些事件时，图片会自动更新。
-- -------------------- ---- -------
--------- -----
----- --------- ---------------
------
----- ----------------
---------------- --------------
------- ------------------------------------------------------------------------------------
-------
------
---- -----------------------
------ ----------- ------------------- ------------------ ----- -----
---- --------------------- ------------ -------
------
--------
--- --- - ----------------------- ----
------------------------ ---------------- -
--------------- - ----------------------------------
---
---------
-------
-------在这个示例中，我们添加了一个 input 元素，用户可以在其中输入图片的 URL。这个 URL 会被双向绑定到控制器中的 imageUrl 变量上，然后通过 ng-src 指令动态更新图片的 src 属性。
总结
ng-src 指令是 AngularJS 中一个非常方便的指令，它允许我们动态绑定图片的 src 属性，从而实现根据用户输入或者其他动态数据来加载不同的图片。通过这篇文章的学习，希望你对 ng-src 指令有了更深入的了解，并能在实际项目中灵活运用。