Having difficulty connecting images or photos to CodePen

I've been attempting to connect images and sound files to my CodePen project using a Dropbox shared 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>

Unfortunately, neither the background image in my CSS file nor the sound file for my keyboard event seems to be working. Everything functions perfectly with local files containing local sounds and images.

I'm trying to utilize Dropbox to host these files since CodePen doesn't support direct file uploads. However, it seems like things aren't working as expected. Is this feature not supported? I could have sworn I've seen it done before, or maybe I'm missing something obvious.

javascripthtmlcssdropboxcodepen

Answer №1

Take a look at this Codepen example. Here's the code snippet I'm currently using:

<audio data-key="55">
  <source src="https://dl.dropboxusercontent.com/content_link/xyz123456abcdef789/file?dl=0&duc_id=dropbox_duc_id" type="audio/mpeg">This browser does not support the audio element.
</audio>

Answer №2

Make sure to use the specific image URL for optimal performance.

https://images.example.com/image.jpg

The above URL is the direct link to the image that you can insert into your CSS code.

background:  url('https://images.example.com/image.jpg') no-repeat center center fixed;

I trust this information will be beneficial for you.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the most efficient method for transferring session data from a Client component to a server component in NEXT.js version 13 and beyond?

Currently, I am working on a web application that requires passing session?.user?.email from the useSession() function in next-auth/react to a server-side component. This server-side component will then execute a fetch request to /api/users/email/ to deter ...

javascriptreactjsnext.jsnext-auth

steps to remove the border of the select box in MUI component

i am struggling to disable the border on the select box and change the color of the label text when focused or blurred i have attempted it but have been unsuccessful i am not very skilled at Mui component customization this is the image that i desire ht ...

javascriptreactjsmaterial-ui

Utilizing javascript to reverse an array and seamlessly filling in the missing elements

Consider an array containing data with increasing percentage values and some missing entries. For instance: { "months": 11, "factor": 1.31, "upperMonths": 10.5, "lowerMonths": 11.49, "limit": 20, "percentage": 8 }, { "mont ...

javascriptarrays

Incorporating a variety of background images and colors into a navigation bar

Hey there, I could really use some assistance with a design challenge I'm facing. My goal is to have a navigation bar with two different background colors - most of the list items should have a red background, while one specific item needs to have a b ...

htmlcssmenunavigation

Create-react-app fails to generate a template even though the react framework is fully updated

I attempted to set up a fresh react directory using npx create-react-app. Unfortunately, every solution I tried resulted in the template not being provided, with the common suggestion being that my version of create-react-app may be outdated. I verified t ...

javascriptreactjscreate-react-app

I am having trouble getting the Audio Code (a very basic code) to function properly

<audio id="myAudio" src="Avengers.mp3" type="audio/mpeg"></audio> <script> window.onload = function(){ document.getElementById('myAudio').play() } </script> Recently experimenting with some code in NotePad, a friend had ...

javascripthtml

How to pass a variable or value through the async await API in the Vue.js and Laravel integration?

I'm facing an issue with my API where I want to check if a given email exists in the database, but every time I run it and view the console log, it returns undefined. Can anyone here suggest a better code snippet or approach for this? I specifically w ...

javascriptnode.jsvue.jsasync-awaitfetch-api

Choose class based on the retrieved information

Good morning, I am working on dynamically setting the class of a td element based on data fetched from a database to reflect any changes or updates. One of the fields returned has four possible options, and I need to modify the CSS class of that field acc ...

jquerycssajax

Jest - verifying the invocation of local storage within an async function that is currently being mocked

I need assistance with testing an API call within a React component. The current setup involves setting localStorage in the api call, which is causing issues when trying to test if it's being called correctly. login = () => { // <--- If I se ...

javascriptreactjsjestjs

Blending images together can obscure surrounding elements

Is there a way to make two images crossfade on hover without hiding the text underneath? I need the text to show below the image, not behind it. Any suggestions on how to solve this issue? #center { text-align: center; } #under { text-align: cente ...

htmlcss

HTML5: Implementing shared web workers for efficient communication across multiple connections

As far as I know, one of the main advantages of HTML5's shared web workers is their ability to handle multiple connections within a single separate thread of execution. I'm curious if anyone has managed to achieve multiple connections working as ...

htmlconnectionweb-worker

Creating a flexible grid layout using Flexbox and JavaScript media queries to dynamically adjust container size

I enjoy working on Etch-a-Sketch projects from The Odin Project, but I am looking to take it a step further than just the assignment. I want to challenge myself by achieving this solely with Flexbox and JavaScript, without involving CSS Grid. When I se ...

javascriptflexboxmedia-queries

steps to verify the status of a sent request

I am utilizing the contenteditable property in a p tag. My code is as follows: <p contenteditable="true" id="Option1_<?php echo $i ?>" style="width:98%;border:4px thin black; background-color:#D6D6D6;font-size:18px;color:black;padding:3px ">&l ...

javascriptphpjquerymysqlajax

What is the most effective approach to handling dependencies for an AngularJs 1.x web application?

Right now, I have a bunch of script elements pointing to cdn/local files, which isn't ideal. I'm considering declaring all necessary packages using npm/yarn and serving cdn files with self-hosted fallback. Is this a good idea? Would it be bette ...

javascriptangularjsnpmwebpackdependencies

Styled-Component: Incorporating Variables into Styled-Component is my goal

Currently, I am working on an app and have created a separate file for styling. I decided to use style-components for custom CSS, but faced an issue where I couldn't access variables instead of HEX values. Even after storing color values in a variable ...

javascriptreactjsecmascript-6styled-components

What steps can be taken to disable Angular's automatic trimming of fields?

Is there a global way to prevent Angular from automatically trimming input fields throughout the entire application? I know that I can avoid it for specific fields using the ngTrim directive, but it's not ideal to add this directive to every text fiel ...

javascriptangularjstrim

Creating a Jquery method to handle multi-line ellipsis for long text

Check out this fiddle I made: http://jsfiddle.net/mupersan82/JYuSY/ This snippet handles multiline ellipsis: $(function() { var ellipsisText = $('.multilineEllipseText'); var textContainer = $('.incidentCellBottomRight').height(); whi ...

jqueryhtmlcss

Tips for inserting an HTML tag within an object

How can I format a list from an array of objects in React? The 'answer' key consists of the text... Question: blah, Answer: `List title The top advantages of Kin are: 1. 2. 3. 4. ` I want to create so ...

htmlreactjsobjectpchart

Eliminate the empty gap preceding the slideshow

I have a slideshow and aside content in HTML. My goal is to eliminate the space below the slideshow so that the aside content can be positioned right next to the end of the slideshow. Unfortunately, I am unsure how to remove this space without disrupting ...

jqueryhtmlcsswebslideshow

Tips for managing the width of tr:nth-child(odd)

I am in search of a way to style my datasheets using tr:nth-child(odd). Below is the code snippet I am currently using: My main concern lies in adjusting the width. I aim for it to occupy a space that measures 200px by 400px The depth does not pose an is ...

htmlcss