html中图片插入失败的问题

在.css中插入失败

  • 若你的文件夹为以下目录
    在这里插入图片描述
    (图片全部在images中)
    插入图片应该是相对路径即插入图片如下
 %需要注意的是在CSS中是  .. 
 background:url(../images/1.png) 

.html中插入失败

若文件目录依然如上
当你使用

<img src="" />
  • 如果输入的是"/image/1.png"
    你可以在浏览器中看到
    在这里插入图片描述
    说明此时使用的是绝对路径
  • 如果输入的是"./images/1.png"
    在这里插入图片描述
    说明此时使用的是相对路径
  • 如果输入的是 " . ./images/1.png"
    在这里插入图片描述
    说明的是这是相对路径的上一层
综上可以看出,在html中插入失败的情况,一是可以输入绝对路径,二是输入相对路径时应该是在’./‘而不是’. ./'或者"/"
此用于本地测试
  • 4
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
当我们在 Vue 项目使用富文本编辑器插入图片时,通常要上传到服务器或者将图片转换成 Base64 编码的字符串,以下是一个基于 Element UI 富文本编辑器的上传图片的示例代码: ```html <template> <div> <el-editor v-model="content" :toolbar="toolbar" :upload-image="uploadImage"></el-editor> </div> </template> <script> export default { data() { return { content: '', toolbar: [ 'image' ] } }, methods: { async uploadImage(file) { try { const formData = new FormData() formData.append('file', file) const response = await this.$axios.post('/api/upload', formData) return response.data.data.url } catch (error) { console.error(error) return '' } } } } </script> ``` 在这个示例,我们使用了 Element UI 提供的富文本编辑器组件 `el-editor`,将 `content` 绑定到富文本编辑器的内容,并通过 `toolbar` 属性指定了工具栏图片上传功能。同时,我们定义了一个 `uploadImage` 方法,用来上传图片到服务器。在这个方法,我们使用 `FormData` 对象将图片文件包装成表单数据,并通过 `axios` 将数据提交到服务器。在服务器端处理完成后返回图片的 URL 地址,再将这个地址返回到前端,最终将图片插入到富文本编辑器。 需要注意的是,在服务器端需要对上传图片的请求进行处理,将图片保存到指定的位置,并返回图片的 URL 地址。这个过程涉及到服务器端的编程,需要根据具体的需求进行实现。 希望这个示例能够帮到你解决问题

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值