javascript - How to change img src in HTML using AngularJS without editing the HTML file? - Stack Overflow

admin管理员组

文章数量:1344322

I have a website done using AngularJS and all the HTML code is loading from database. So we cannot edit the code. It's loading when the application running. But we can edit the JavaScript files. So I have to edit the img src link. Actually I have to add some main url part to it. How can I do this ?

<img src="/img/logo.png"/> to <img src=".png"/>

This is how this has to be done. No id in the img tag too. Can we use Angular Directives ? And we cannot add anything in the HTML files. No directive name too. Please help me on this. Really stuck in here.

update: the reason the html source can't be changed is because it is ing from an external source and is user generated. the users upload text that contains relative links that work when the pages are viewed statically. however when we load the text into our angular site, relative links no longer work, because the angular code and templates are on a different host than the user content and images.

we would like to find a solution in angular.js directly, without resorting to manipulating the DOM using lower level javascript or jquery.

I have a website done using AngularJS and all the HTML code is loading from database. So we cannot edit the code. It's loading when the application running. But we can edit the JavaScript files. So I have to edit the img src link. Actually I have to add some main url part to it. How can I do this ?

<img src="/img/logo.png"/> to <img src="http://demo./img/logo.png"/>

This is how this has to be done. No id in the img tag too. Can we use Angular Directives ? And we cannot add anything in the HTML files. No directive name too. Please help me on this. Really stuck in here.

update: the reason the html source can't be changed is because it is ing from an external source and is user generated. the users upload text that contains relative links that work when the pages are viewed statically. however when we load the text into our angular site, relative links no longer work, because the angular code and templates are on a different host than the user content and images.

we would like to find a solution in angular.js directly, without resorting to manipulating the DOM using lower level javascript or jquery.

• javascript
• jquery
• html
• angularjs
• angularjs-directive

Share Improve this question Follow edited May 23, 2016 at 17:15 eMBee 79366 silver badges1616 bronze badges asked May 22, 2016 at 5:52 Chanu De SilvaChanu De Silva 42611 gold badge88 silver badges2323 bronze badges 2

• In the controller itself when you generating the html add the base url in front of image path. – Rohìt Jíndal Commented May 22, 2016 at 6:06
• i believe this question is relevant to evaluate directives in the loaded html: stackoverflow./questions/20623118/… – eMBee Commented May 23, 2016 at 16:02

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

notwithstanding the discussion whether it is wise to create an img directive, the actual directive that solves the problem looks like this:

app.directive('img', function() {
  return {
    restrict: 'E',
    replace: false,
    link: function(scope, elem, attr) {
      if (attr.src.slice(0, 7) !== "http://" && attr.src.slice(0, 8) !== "https://") {
        attr.$set("src", "http://demo./+ attr.src);
      }
    }
  };
});

the recursion issue discussed in this ment came from trying to use a template to replace the whole <img> tag instead of just changing the src value

furthermore, in order to apply the directive to html snippets that are loaded dynamically they need to be wrapped in a directive that piles its contents:

app.directive('dynamic', function($pile) {
  return {
    restrict: 'A',
    replace: false,
    transclude: true,
    link: function(scope, ele, attrs) {
      return scope.$watch(attrs.dynamic, function(html) {
        ele.html(html);
        $pile(ele.contents())(scope);
      });
    }
  };
});

applied like this:

<div dynamic="content"></div>

where content is the variable in your scope that contains the dynamic html snipped with your <img> tags.

---

if you want to avoid a directive named img, one way would be to "fix" the snippet:

content.replace(/<img /g, "<img customimg ")

and then start the directive like this:

app.directive('customimg', function() {
  return {
    restrict: 'A',
...

using replace here seems rather crude, but i can't think of another way. suggestions to improve the answer would be wele!

in your controller you can add field

$scope.image = {src:"your url to the imge"};

and in your html

<img src="image.src"/> 

and you can change the image src anytime

Part of this can be acplished using ng-src to utilize interpolation .

Example :

In your respective controller ...

$scope.linkappend = 'http://demo.';

in the end your document will end up like this ..

 <img ng-src="{{linkappend}}/img/logo.png"/>

Didn't really understand why you are not able to touch dom but the prototype above can be placed in a directive and the only other option is to grab the name of the file that the user uploads and build your own path name with the name of that file, then append it back to the dom.

If you're unable to edit the html file then it would be tricky to add angular directives. Have you thought about using jQuery to manipulate img source?

You can use .getElementsByTagName('img') to get all img tags

var imgs = document.getElementsByTagName('img');
var src = imgs[x].getAttribute("src");    //x is the index of img tag
imgs[x].src = 'http://demo.' + src;

If you want to change the src of all img tags, you can use for loop.

本文标签： javascriptHow to change img src in HTML using AngularJS without editing the HTML fileStack Overflow