淘汰图像 src 绑定问题答案

【问题标题】：knockout image src binding issue淘汰图像 src 绑定问题
【发布时间】：2013-06-02 20:14:49
【问题描述】：

我已将存储图像名称保存在数据库中，并将图像文件保存在本地文件夹中我用过绑定图片

<img width="16px" height="16px" data-bind="attr:{src: PhotoName}"  />

在 html 中显示

<img src="http://sitename.com/Controller/action/imagename.extension"/>

但我需要

<img src="http://sitename.com/imagefolder/imagename.extension"/>

知道如何解决这个问题吗？提前致谢。

【问题讨论】：

PhotoName 包含什么？只有imagename.extension?
你为什么认为这是一个淘汰赛的问题？你在PhotoName 中存储了什么？
只有照片名称和扩展名在数据库中，图片在文件夹中
我是敲门砖的新手，我已经面对这种情况了。我刚刚找到了一个简单的解决方案。 <img class="lazy" data-bind="attr: { src: '../imagefolder/' + PhotoName, alt: Name }" /> 解决方案只是 ../ 在路径之前使用，然后你会得到你需要的结果。尽管这个问题是 3 年前提出的，但我仍然想分享它。

【解决方案1】：

您的问题与 kncokout.js 无关。如果您的PhotoName 仅包含imagename.extension，则需要手动构建图像路径才能正确显示图像。

所以你需要直接在绑定中创建正确的路径：

<img data-bind="attr:{ src: '/imagefolder/' + PhotoName }" />

请注意，如果您的PhotoName 是ko.observable，那么您需要写src: '/imagefolder/' + PhotoName()。

或者在你的视图模型中移动这个逻辑，例如创建一个计算属性来构建链接，或者在创建视图模型时将正确的 url 分配给 PhotoName 等。

【讨论】：

第一次我添加了这个：但它不起作用。但现在它的工作是因为“（）”
输入类型="file"怎么样？
该注释是否仅适用于值被连接的情况？在我的情况下，<img data-bind="attr:{ src: resultImage }" /> 工作正常，即使 resultImage 是可观察的。
@ValentinHeinitz 是的，该注释仅适用于绑定中包含一些复杂表达式（如字符串连接）的情况。如果你只直接绑定到一个可观察的属性，那么你不需要写()