如何处理图像源中的空格

时间:2016-11-18 01:06:48

标签: angularjs

我有很多图片,遗憾的是他们的网址中有空格。这些是通过另一个系统中的用户输入提交的,并保存到数据库中。

我对角度管理图像源有问题。它似乎不喜欢ng-src或src属性中的空格或“%20”。

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

将输出此

 <img ng-src="" alt="" />

虽然这个

 <a href="{{smallImg}}">HERE</a>

将输出此

 <a href="http://example.com/path to my/image with/spaces.jpg">HERE</a>

有没有办法在不必返回并重命名所有这些文件夹的情况下执行此操作?

3 个答案:

答案 0 :(得分:2)

我得到了答案,它对我有用。 你可以这样: -

    $scope.smallImg = "http://example.com/path to my/image with/spaces.jpg";

绑定时请执行

    <img ng-src="{{smallImg .replace(' ','')}}" alt="" >

答案 1 :(得分:1)

在使用%20时,我无法将<img> src清空,但您可能正在使用较早版本的Angular。

$scope.smallImg = "http://www.google.com/my images here/pic.jpg".replace(/ /g, "%20");
 ...
<img ng-src="{{smallImg}}" alt="Pic goes here" />

这是一个有效的演示:https://plnkr.co/edit/hTFw8rAg0CRxDGjROjjp

(试图在网上找到名字中有空格但没有运气的图片)

答案 2 :(得分:0)

好吧,事实证明这是一个二级插件,magic360干扰了图像源