有没有办法在我的网站上显示图片,前提是图片不是列表中的空值?

无名

我正在使用一个简单的数据库和 angular 设置一个用户界面,用户可以在其中发布一条消息,要么只包含一条消息,要么在消息中附加一张图片。

通过一些研究,我发现了内置的 ngIf 条件,如果变量不包含空值,您可以在其中显示变量。

这是我的代码和输出:

 <div ng-repeat="m in chatDetailsCtrl.messageList">
            <!-- This card prodives space for the message and Like/dislike buttons -->
            <div class="row">
                <div class="col s12 m6">
                    <div class="card">
                        <div class="card-content">
                            <!-- Card Title is the person who wrote the message -->
                            <span class="card-title">{{m.user_ID}}</span>
                            <!-- Here comes the message text -->
                            <p> {{m.post_msg}}
                                <div> <span class="new badge light-blue">{{m.post_date}}</span></div>
                            <p *ngIf="m.photo_url">
                                <img src="{{m.photo_url}}"  width="100" height="100">
                            </p>
                               {{m.post_date|date("m/d/Y")}} -->
                            </p>
                            <td><a class="waves-effect  light blue lighten-1 btn-small" ng-click="chatDetailsCtrl.postDetails(m.post_ID)">Post Details</a></td>
                        </div>
                        <div class="card-action">

                            <a class="btn-floating btn-small waves-effect waves-light blue" ><i class="material-icons">thumb_up
                            </i></a> <span ng-bind= "m.likes">  </span>
                            <a class="btn-floating btn-small waves-effect waves-light blue"><i class="material-icons">thumb_down
                            </i></a><span ng-bind="m.dislikes">  </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

这是输出

我想看看 m.post_url 是否包含一个值。当为空时,我想跳过将此变量添加到我的网站。

比如上一篇,没有图片,我想让它看起来像这样:

预期输出

抱歉我的英语不好,英语不是我的第一语言。

赫利什凯什羽衣甘蓝

首先,您将 angularJs 语法与新的 angular 混合在一起。

如果您ng-if在图像标签中使用 angularjs,请使用它工作正常。

正如我所看到的,您使用的是 ng-repeat 和 ng-bind,您使用的是 angularjs 而不是 angular。

所以在你的图像标签中使用

 <p ng-if="m.photo_url">
      <img src="{{m.photo_url}}"  width="100" height="100">
  </p>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

有没有办法在使用列表时不更改列表中的原始值?

有没有办法在Xcode中插入图片?

有没有办法使用javascript从图片src网址中获取数字?

有没有办法对网站上的每个页面进行截图?

有没有办法从网站上的影子根中提取信息?

有没有办法告诉网站上是否存在json

有没有办法在移动网站上向下滚动或触发无限滚动加载?

有没有办法将xamarin登录页面连接到Webview中的我的网站?

Google Pagespeed Insight测试在快速网站上失败,并显示NO_FCP错误,有没有办法解决?

有没有办法在Xubuntu中更改用户图片,并在登录时实际显示它?

有没有办法禁用网站上巨大的广告牌/画廊?

我的网站上传后没有显示图片

有没有办法让mp3持续在整个网站上播放?

有没有办法在 Visual Studio C# 中更新图片(bmp)?

有没有办法在输入字段中显示项目符号而不是数字

有没有办法根据单元格条件显示图片

我的背景图片没有显示在我的网站上

有没有办法在 html 静态网站上隐藏 .html 扩展名?

有没有办法让我的图片在 HTML 代码中居中?

有没有办法检测 LastPass 扩展是否在网站上运行(在 React 中)

有没有办法跳过空值刻度?

有没有办法让控制台显示具有最高值的列表?

有没有办法从网站上点击一个recaptcha元素

为什么我的背景图片没有显示在网站上?

有没有办法在新的 Google 网站上允许来自 Cloudflare 的脚本?

有没有办法让用户在 Django 网站上发帖之前先付款?

Ant Design:有没有办法设置我的卡片封面图片以自动适应可用空间?

有没有办法在蚂蚁设计图片预览操作中更改图标?

有没有办法将对象的名称而不是该对象的值用于列表?