Question

我可以在div中加载所有5张图片。现在我试图分别在每张图片旁边添加文字。假设图像是裁剪的。我试图添加裁剪使用angularjs在该图像旁边的文字。我可以实现这一点。任何人都可以帮我解决这个问题......

我的HTML代码：

<div style="margin-top: 4px;">
                    <img width=30 height=50 style="margin-left: 12px;"
                        ng-repeat="generalimage in generalimages track by $index"
                        ng-src="{{generalimage}}"> </img>
                </div>

我的js代码：

$scope.generalimages = [];
    $scope.generalimages.push('images/Undo.png');
    $scope.generalimages.push('images/Resize.png');
    $scope.generalimages.push('images/Rotate.png');
    $scope.generalimages.push('images/Resolution.png');
    $scope.generalimages.push('images/Crop.png');

Answer 1

我不知道你的意思是旁边的图像，它可能是工具提示文本或只是简单的文字后图像。你可以这样做：

JS

$scope.generalimages = [{
  "image":"images/Undo.png",
  "text" : "Undo"},
 {
  "image":"images/Resize.png",
  "text" : "Resize"},
{
  "image":"images/Rotate.png",
  "text" : "Rotate"},
{
  "image":"images/Resolution.png",
  "text" : "Resolution"},
{
  "image":"images/Crop.png",
  "text" : "Crop"},
  ];

HTML

<ul>
   <li  ng-repeat="item in generalimages track by $index">
      <img ng-src="{{item.image}}"></img>
      <span>{{item.text}}</span>
   </li>
</ul>

Answer 2

使用以下代码附加图片旁边的文字 -

<div>
    <img src=""/>
    <span display: block>Text below the image</span>
</div>

如何使用angularjs在该图像旁边加载图像和文本

2 个答案: