div标签怎样即可输入文字也可以展示图片
时间: 2023-08-21 15:05:45 浏览: 52
要实现这个功能,需要使用contenteditable属性和插入图片的功能。你可以使用以下代码实现:
```html
<div contenteditable="true">
在这里输入文字或插入图片
</div>
```
然后,在用户想要插入图片的地方,你可以使用JavaScript或其他框架来实现插入图片功能。例如,你可以使用`<input type="file">`元素来让用户选择图片,并使用`<img>`元素来展示图片。
```html
<div contenteditable="true">
在这里输入文字或插入图片
<br>
<input type="file" onchange="insertImage()">
</div>
<script>
function insertImage() {
// 获取用户选择的图片
var file = document.querySelector('input[type=file]').files[0];
// 创建一个新的<img>元素
var img = document.createElement('img');
// 将图片作为URL读取
var reader = new FileReader();
reader.onloadend = function() {
img.src = reader.result;
// 将<img>元素插入到<div>中
document.querySelector('div').appendChild(img);
}
reader.readAsDataURL(file);
}
</script>
```
这样,用户就可以在`<div>`标签中输入文字和插入图片了。