如何获得picture标签下的img标签的图片url
时间: 2024-05-04 11:22:17 浏览: 13
你可以使用JavaScript来获取`<picture>`标签中的`<img>`标签的图片URL。以下是一个示例代码:
HTML 代码:
```html
<picture>
<source media="(min-width: 650px)" srcset="large-image.jpg">
<source media="(min-width: 465px)" srcset="medium-image.jpg">
<img src="small-image.jpg" alt="image">
</picture>
```
JavaScript 代码:
```javascript
const pictureTag = document.querySelector('picture');
const imgTag = pictureTag.querySelector('img');
const imgUrl = imgTag.src;
console.log(imgUrl);
```
这段代码首先使用`document.querySelector()`方法获取`<picture>`标签,然后使用`querySelector()`方法获取其中的`<img>`标签。最后,使用`src`属性获取图片的URL并输出到控制台。
相关问题
使用beautifulsoup获得picture标签下的img标签的图片url
假设我们有以下的HTML代码:
```
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="An image">
</picture>
```
可以使用BeautifulSoup库来获取`<picture>`标签下的`<img>`标签的图片URL,代码如下:
```python
from bs4 import BeautifulSoup
html = """
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="An image">
</picture>
"""
soup = BeautifulSoup(html, 'html.parser')
img_tag = soup.picture.img
img_url = img_tag['src']
print(img_url) # 输出:image.jpg
```
此处我们首先将HTML代码传入BeautifulSoup库中,然后使用`soup.picture.img`获取`<picture>`标签下的`<img>`标签,最后获取`<img>`标签的`src`属性即可得到图片的URL。
html中有src属性的标签
HTML中有许多带有`src`属性的标签,其中最常见的是`<img>`和`<script>`标签。
`<img>`标签用于显示图像,其`src`属性指向图像的URL地址。
例如:
```html
<img src="https://example.com/images/picture.jpg" alt="A picture">
```
`<script>`标签用于加载JavaScript代码,其`src`属性指向JavaScript文件的URL地址。
例如:
```html
<script src="https://example.com/js/code.js"></script>
```
除此之外,还有一些其他标签也带有`src`属性,比如`<audio>`、`<video>`和`<iframe>`等。