如何将图像添加到环回模型？

Question

我使用 mongodb(mlab)、环回和 angular4 创建了一个博客 post，我可以在 [=] 上显示我的 post 26=] 4 站点，但是我不知道如何将图像添加到我的环回模型中，此处显示为 json:
{ "title": "string", "author": "string", "date": "string",// 类型可以是日期 "body": "string", "id": "string" }

没有图像属性类型，所以我很困惑如何将我的图像 url 添加到我的环回数据模型以便在我的 angular 4 博客上显示它.我可以为每个 post id 使用 <img *ngIf="post.id === '599ce3147e0f7a32c812a6ac'" src="http://drvidyahattangadi.com/wp-content/uploads/2014/12/panchkarma3.jpg" alt="">，但如果我有很多 post，这将非常低效。谁能帮忙？

Answer 1

如果我很好地理解你的问题，你想为你的 angular 前端提供图像。在我工作的所有项目中，我们都没有将图像保存在数据库中。我们将图像保存在服务器硬盘上，并将 URL 添加到数据库中。

然后在angular这边，只需要在img标签的src属性中设置URL即可

如果你的图片比较多，可以使用其他服务器来提供图片，提高效率。

Answer 2

当您在 Loopback 中使用图像类型的对象时，推荐的方法是为您的环回应用程序创建组件存储。

npm install loopback-component-storage --save

您只需在 CLI 中提供一系列答案，如以下代码所示。

$ slc loopback:datasource
[?] Enter the data-source name: storage
[?] Select the connector for storage: other
[?] Enter the connector name without the loopback-connector- prefix: loopback-component-storage
[?] Install storage (Y/n)

将在 datasource.json 文件中添加您的存储条目。

"storage": {
  "name": "storage",
  "connector": "loopback-component-storage",
  "provider": "filesystem",
  "root": "./files"
}

创建所需的 "model" 后，您可以简单地使用文件结构来下载和上传图像。

ex:
POST /api/containers/container-name/upload

以下 link 将帮助您逐步创建回送中的组件存储和映像 upload/download 功能。

Answer 3

您可以在 "server"

下创建的侧 "storage" 文件夹中创建文件夹调用 "userassests"

Folder structure : server>storage>userassests

在我们的用例中，我们将此环回应用程序托管在 docker envioronment.in docker-compose.yml 文件中，我们将 storage/userassest 文件夹安装到服务器位置。

之后您可以简单地调用 angular 上传功能作为 below.With angular 上传功能您将获得一个文件输入，您可以使用上传指令完成操作。

 $scope.uploadPic = function (file) {
            Upload.upload({
              url: '/api/containers/userassets/upload',
              file: file
            }).then(function (response) {
              $scope.orgLogo = "/api/containers/userassets/download/" + response.data.result.files.file[0].name;
              file.result = response.data;
              $timeout(function () {
                $scope.result = response.data;
              });
            }, function (response) {
              if (response.status > 0) $scope.errorMsg = response.status + ': ' + response.data;
            }, function (evt) {
              // You can get upload progress here
              file.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
            });
          }

执行此代码行后，您的图像资产将传输到服务器安装位置，并且在应用程序级别也保存在 storage/userassets 文件夹中。

然后您可以使用API操作进行上传和下载。希望这会好...如果您需要进一步的说明，我很乐意提供。干杯...!!

如何将图像添加到环回模型？

how do I add an image to a loopback model?

angular

loopbackjs

loopback

angular-loopback