原生js动态创建img
时间: 2023-10-23 16:35:34 浏览: 131
动态创建IMAGE控件
4星 · 用户满意度95%
使用原生 JavaScript 动态创建 `img` 标签可以通过以下步骤实现:
1. 创建 `img` 标签:使用 `document.createElement()` 方法创建一个 `img` 元素。
```javascript
var img = document.createElement('img');
```
2. 设置 `src` 属性:使用 `setAttribute()` 方法设置 `img` 元素的 `src` 属性,指定要加载的图片的 URL。
```javascript
img.setAttribute('src', 'https://example.com/image.jpg');
```
3. 添加到文档中:使用 `appendChild()` 方法将 `img` 元素添加到文档中的某个元素中,例如 `body`、`div` 等。
```javascript
document.body.appendChild(img);
```
完整示例:
```javascript
var img = document.createElement('img');
img.setAttribute('src', 'https://example.com/image.jpg');
document.body.appendChild(img);
```
需要注意的是,在加载图片时可能会遇到跨域问题,需要在服务器端设置 CORS 或者使用代理等方式解决。
阅读全文