HTML编辑器中使用img插入图片

简介:

首先,要说明一点,我现在使用的这个系统的网络编辑器,不支持图片的插入功能。但是,我现在要实现这个功能,因为在我的文章中要出现大量的图片。

如果不能插入图片的话,那是一件很纠结的事情,而且也会影响到整篇文章的效果。

其次,对于HTML语言我是不懂的,也没有时间去学习它了。

而我现在的目的就是要把服务器上已经上传的图片,插入到文章中。在网上差了很多的资料,说要使用img这个标签。

兄弟们,你懂的啊。咱们没有学过网页编程之类的语言,说一咱们不懂。但是网上也有这方面的相关实例,咱就比葫芦画瓢了哦。

看截图:

clip_image001

我在网上看了很多的解释,就是使用如下的格式:

<p>月季花: <img src="/images/EDA1.jpg" /></p>

这个写的很简单,但是让我们这些门外汉,看不懂呢。其中还有的提到了HTML的相对路径和绝对路径。咱对这个是更不理解了,这个是属于专业术语。

不过有一点,我们不得不提到,那就是加入网站不在此空间上了,那么搬家后的网站文章中的图片必须能显示的。看了网上的相关解释,如果要达到这个要求的话,那要使用相对路径。

好了,我们现在已经确定要使用的格式了,那么还要确定图片的存储文件夹。我们现在假设图片存在image这个文件夹下。如果要使用相对路径的话,那么上面的格式就要进行一些相应的修改了。

<p>月季花: <img src="../images/EDA1.jpg" /></p>

可以看到,很明显的不同就是多了两个点点。呵呵,这个我们现在在编辑器中,来看看效果。

clip_image002

clip_image003

我们现在要把,上边的代码复制近来就可以了。

clip_image004

代码复制近来之后,再次点击“源码”进行切换,切换到普通视图下。

clip_image005

我们现在可以在后台看到图片了。,然后我们再看看前台的效果如何??

clip_image006

我们可以看到文字已经显现出来了,但是前台却没有显示出来,这个很纠结的呢。我们主要是前台看图片呢。后台不显示也是可以的,但是前台必须要显示。

其实这个很简单呢,还记得前边我们修改的那个格式吗?我们只是多加了两个点,现在我们少一个看看如何?

clip_image007

我们在此切换到普通视图下,可以看到图片已经不显示了

clip_image008

那我们在切换到前台:

clip_image009

可以看到现在前台已经显示图片了,呵呵,我们的目的也已经达到了。

PS:很多的高手已经不屑于,我们这种门外汉了。不过,我们只要达到自己的要求就行了。

相关文章
|
1月前
利用html2canvas插件自定义生成名片信息并保存图片
这是一个利用html2canvas插件自定义生成名片信息并保存图片,自定义上传头像,自定义输入个人信息内容,自定义图片名称,并将生成的图片保存到本地
38 1
利用html2canvas插件自定义生成名片信息并保存图片
|
5月前
|
移动开发 前端开发 JavaScript
基于 HTML5 和 Canvas 开发的在线图片编辑器
基于 HTML5 和 Canvas 开发的在线图片编辑器
110 0
|
2月前
HTML图片
【10月更文挑战第4天】HTML图片。
31 2
|
3月前
|
前端开发
Twaver-HTML5基础学习(37)network导出图片并下载
本文介绍了如何在Twaver-HTML5中将network导出为图片并提供下载,主要通过将network转换为canvas对象,然后转换为base64编码的图片进行展示和下载。
43 5
|
3月前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
60 13
HTML基础知识(1)常用标签的使用 h、p、img、meta、a、iframe...
该博客文章详细介绍了HTML的基础知识,包括注释、标签属性、常用标签、实体、图片引入、meta标签、内联框架、超链接的使用,并通过代码示例和测试结果截图展示了这些元素在网页中的应用效果。
HTML基础知识(1)常用标签的使用 h、p、img、meta、a、iframe...
|
4月前
在线将多张图片拼接起来图工具HTML源码
在线将多张图片拼接成一张图片,多图合一并导出下载。无需本地安装软件。 下载时,使用日期时间作为文件名,规避图片文件名相同造成的覆盖问题;也能省去一部覆盖确认操作 多语言支持
49 0
在线将多张图片拼接起来图工具HTML源码
|
4月前
|
JavaScript
在Vue项目中vue-quill-editor的安装与使用【详细图解+过程+包含图片的缩放拖拽】
文章详细介绍了在Vue项目中安装和使用`vue-quill-editor`的步骤,包括如何通过npm安装、局部挂载、在Vue页面中引入和配置使用。同时,还提供了如何实现图片的缩放和拖拽功能的进阶教程,涉及到安装额外的插件`quill-image-drop-module`和`quill-image-resize-module`,以及对Webpack配置的调整。最后,文章还提供了实际效果展示和一些后续可能的拓展功能,如上传视频和将图片上传到服务器等。
在Vue项目中vue-quill-editor的安装与使用【详细图解+过程+包含图片的缩放拖拽】
|
4月前
|
Python
Python 下载 html 中的 图片
Python 下载 html 中的 图片
36 2
|
5月前
|
数据采集 缓存 自然语言处理
PHP将HTML标签转化为图片
通过这个方法,PHP后端能够实现将HTML内容转化为图片的功能。这种方式虽然牵涉到一些额外的安装和配置,但能够相对灵活且稳定地解冀转换需求,适用于需要在后端动态生成图片的场景。
228 1
下一篇
DataWorks