本地上传的图片如何显示出来

本地上传的图片如何显示出来

如下文章发表时,从本地上传的文章封面图片,如何显示在这个位置呢?

https://img1.sycdn.imooc.com/climg/6774c5340983509709480453.jpg

正在回答

登陆购买课程后可参与讨论,去登陆

1回答

同学,你好!new-article.html中发表button按钮需要添加id,因为是在发表单击事件中才会出现文件上传界面的。添加如下:

https://img1.sycdn.imooc.com/climg/67776560097f446210810079.jpg

在new-article.js文件中的creatArticle方法中添加如下代码:
https://img1.sycdn.imooc.com/climg/3a7d6567097765b708240589.jpg
效果图:

https://img1.sycdn.imooc.com/climg/677765e6093f402f09340426.jpg


祝学习愉快~

  • 曲别针010 提问者 #1

    使用老师说的方式已经实现,这中方式是通过后端传递过来的url实现的,可不可以不通过后端,直接前端显示本地图片,等到用户保存的时候,再向后端写入保存?

    2025-01-08 10:30:32
  • 好帮手慕小猿 回复 提问者 曲别针010 #2

    同学,你好!这个方法是前端js 实现的。老师暂时无法想到,同学指的前端实现是如何实现。因为是需要在点击"发表"时才会出现模态框如:文章头像、选择文章类型等内容,所以需要在执行"发表"函数时执行图片上传功能的,不然无法实现的。

    祝学习愉快~

    2025-01-08 15:50:25
  • 曲别针010 提问者 回复 好帮手慕小猿 #3

    同学指的前端实现是如何实现

    ------就是假设只有一个HTML文件,没有后端,如下,直接将图片显示在img框中。

    我本来是想尝试将上传图片的本地文件路径赋值给img src的,但是从event-files中寻找上传图片的本地文件路径,但是没有找到。

    当然这只是我自己的想法,如果这种方式不能实现,或者实际场景用的时候基本都是老师课上讲的方式,就不用处理了

    spacer.gifhttps://img1.sycdn.imooc.com/climg/9269c467097f21d408660621.jpg

    https://img1.sycdn.imooc.com/climg/677f21bb0921aa4d19200692.jpg

    2025-01-09 09:12:39
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师