如何通过检查 html 源来下载这个声音图标？

Question

我正在尝试下载声音图标

来自这个url。当我检查这个元素时，我看到它的代码是

<div class="sound audio_play_button pron-uk icon-audio" data-src-mp3="https://www.oxfordlearnersdictionaries.com/media/english/uk_pron/l/lov/love_/love__gb_1.mp3" data-src-ogg="https://www.oxfordlearnersdictionaries.com/media/english/uk_pron_ogg/l/lov/love_/love__gb_1.ogg" title="love pronunciation
                    English" style="cursor: pointer" valign="top">&nbsp;</div>

从这个来源，我没有看到任何图像文件。你能帮我得到这个图标吗？

Answer 1

图像是使用 css 属性加载的。您必须下载 css 文件，即 https://www.oxfordlearnersdictionaries.com/external/styles/oald10.css?version=2.0.42，其中包含 div 的背景图像。

通过类名搜索 -

phons_n_am a,
.top-g .phonetics .pron-us, .sound.audio_play_button.pron-us.icon-audio {
    background-image: url(../images/documents/audio_name_initial.svg);
}

phons_n_am a:hover,
.top-g .phonetics .pron-us:hover, .sound.audio_play_button.pron-us.icon-audio:hover {
    background-image: url(../images/documents/audio_name_playing.svg);
    -webkit-transition: background-image 100ms linear;
    -o-transition: background-image 100ms linear;
    transition: background-image 100ms linear;
}

要下载图片，请使用 - 在网址前加上 - https://www.oxfordlearnersdictionaries.com/external/

示例 - https://www.oxfordlearnersdictionaries.com/external/images/documents/audio_name_initial.svg