【问题标题】:Jhipster - [src]="getImageUrl()" for user's avatar image not workingJhipster - [src]="getImageUrl()" 用于用户的头像图像不起作用
【发布时间】:2017-08-03 14:51:01
【问题描述】:

我用不同的值更新了 [jhi_user] 表中的 image_url 列,但似乎没有任何效果,example: image_url= ../../../content/media/angular-js.png

问题: 我应该在 jhipster 的文件结构中的哪个位置创建一个文件夹来保存用户的个人资料图片,以及 image_url 值应该是什么才能使用 <img [src]="getImageUrl()">

值得一提的是,这很有效: <img src="../../../content/media/angular-js.png"> 我用图片创建了一个文件夹“媒体”:angular-js.png

我正在使用 mysql 数据库和 generator-jhipster: "4.6.2"

提前感谢您的帮助

【问题讨论】:

    标签: jhipster


    【解决方案1】:

    Web 应用程序中有两种图像:静态资源用于布局(图标、背景、徽标等),它们捆绑在您的应用程序中,另一种可以在不重新构建应用程序的情况下进行更改,以及哪些是数据。

    静态资源可以被浏览器长期缓存,这就是为什么 JHipster 使用带有哈希码的webpack to version their URLs 来修改引用它们的文件(html、css)并捆绑它们。

    在您的设计中,您的图像 URL 存储在 User 实体的列中,该列指向作为静态资产的头像图像。所以 webpack 无法重写。

    因此,要么从 webpack 构建过程中排除这些图像,要么将图像作为 Blob 存储在数据库中,以使用户能够上传自己的图像。

    第二个选项是创建一个新的实体 Avatar,该实体持有 Blob 并与用户实体具有一对一的关系。另一个实体的原因是 JHipster 不允许您修改用户实体。

    【讨论】:

    • 我试图避免将用户的图像保存为数据库中的 Blob,我只想存储他们的 URL。当我尝试不同的选项时,我创建了一个新文件夹“媒体”:content/media/user_image.png 将用户图像存储为数据。我将 url 存储在 DB 中为 ../../../content/media/user_image.png 并尝试使用 <img [src]="getImageUrl()"> getImageUrl() 加载图像返回存储在 BD 中的图像 URL。这不起作用,为什么?我使用了错误的 URL 格式???
    • 我的解释中关于webpack重写的URL你不明白的是什么?您是否阅读了链接中的文章?
    • 我在 webpack.dev 中使用new CopyWebpackPlugin([ { from: './media', to: 'media' } ])media/user_image.png 放入target/www,所以现在使用<img [src]="media/user_image.png" 可以正常工作。这只是为了测试,在生产中我可能会使用内容交付网络,如 Amazon CloudFront,并且只使用 http url 来存储图像,因此在生产情况下这不是必需的。我是 webpack 和 angular 的新手,所以我还在学习。谢谢你的帮助:)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-03-15
    • 2023-04-08
    • 2018-04-06
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多