无法 link 照片或图像到 CodePen

Question

我正在尝试使用投递箱共享 link 图像和声音文件到我的 Code pen link link。

<div class="container">
    <div class="row second-line">                  
        <div class="col-12">
            <div data-key="32" class="key">
                <kbd>BAR</kbd>
                <span class="sound">808</span>
            </div>
        </div>           
    </div>
</div>


<audio data-key="32" src="https://www.dropbox.com/s/qqusqet38wnfexr/8081.wav?dl=0"></audio>

我的 css 文件中的背景图像或键盘事件的声音文件都无法正常工作。这对我使用本地 sounds/img 的本地文件非常有效。

不过，我正在尝试使用保管箱上传它们，因为您无法将文件直接上传到 CodePen。

不支持吗？我可以发誓我以前见过这个，或者我做错了什么而且无知。

Answer 1

您可以使用完全 url 的图像，这样效果很好。

https://photos-2.dropbox.com/t/2/AACwpnCZJSbovN9dSgYlI99tOkrG8qmOjDZQDmRE03cK9g/12/644080844/jpeg/32x32/3/1485946800/0/2/concert.jpg/EO2mxJ0FGA4gBygH/Q3aEGidy4B1EqGjlfgLcFxUvOVFcbpl2vDpixRv4ch8%2CznWx3nvuARPFZAfPD5avW9mleflEhRqDt5xXxIga2K8?dl=0&size=1280x960&size_mode=3

上方 url 是您可以在 css 中替换的确切图像 url。

background:  url('https://photos-2.dropbox.com/t/2/AACwpnCZJSbovN9dSgYlI99tOkrG8qmOjDZQDmRE03cK9g/12/644080844/jpeg/32x32/3/1485946800/0/2/concert.jpg/EO2mxJ0FGA4gBygH/Q3aEGidy4B1EqGjlfgLcFxUvOVFcbpl2vDpixRv4ch8%2CznWx3nvuARPFZAfPD5avW9mleflEhRqDt5xXxIga2K8?dl=0&size=1280x960&size_mode=3') no-repeat center center fixed;

希望对你有帮助。

Answer 2

看看这个 Codepen。我正在使用以下代码：

<audio data-key="32">
  <source src="https://dl.dropboxusercontent.com/content_link/bHRDoVQqFTHeLSx1YSynP8x5KaNfBIWyWzPG4zOvb9gBEyGBwNKImdcgmVZutije/file?dl=0&duc_id=dropbox_duc_id" type="audio/mpeg">Audio element not supported.
</audio>

无法 link 照片或图像到 CodePen

Unable to link photos or images to CodePen

html

javascript

css

dropbox

codepen