Images, videos, and audios fail to load on Vercel

I created a quirky Vercel app that poses a 'yes or no' question: "Do you want to see my dog?" If the answer is yes, my dog will appear with a woof audio; if the answer is no, you'll get jumpscared. It was just done for fun, using simple HTML, CSS, and JavaScript code. However, when I deployed it on Vercel, the dog picture and jumpscare video aren't showing up, ruining my project. How can I fix this?

Check out my GitHub repository here: https://github.com/pendragonarthur/seemydog

P.S.: DevTools are displaying these errors:

Failed to load resource: the server responded with a status of 404 ()

and

Uncaught (in promise) DOMException: Failed to load because no supported source was found.

javascripthtmlcssgithubvercel

Answer №1

The issue lies within the origin of the image and video content, considering replacing it with:

<img src="melina.png" alt="" class="hidden show" id="melina">
<video src="scare.mp4" class="myVideo" id="scare"></video>

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

Reduce the height of the navigation bar

I used the header example from Bootstrap's documents here: https://getbootstrap.com/docs/5.3/examples/headers/# The code I have is: <div class="container fixed-top bg-white"> <header class="d-flex flex-wrap justify-conte ...

cssbootstrap-5

When utilizing PassportJS, SequelizeJS, and JWT tokens, req.user may be found to be undefined

Despite searching various answers on Stackoverflow and consulting the documentation, I am still unable to identify what might be causing the issue. Within my application, I am utilizing SequelizeJS to interact with my MySQL database and now attempting to s ...

javascriptnode.jsexpresssequelize.jspassport.js

Just for laughs: "The react-redux context value seems to be playing hide and seek; make sure to wrap the component in a <Provider> for it to show up!"

I encountered an issue while attempting to run a basic Jest test on a form React component: ● <LoginForm /> › clicking the validate button › should display page title ...

javascriptreactjsreduxjestjs

Customized Bootstrap Dropdown with the ability to add text dynamically

I am working on a Bootstrap dropdown menu that allows users to generate expressions by clicking on the menu items. For example, when the "Action" item is clicked, it should insert {{Action}} into the textbox. The user can then type something like "Hello" a ...

javascripthtmljquerycssbootstrap-5

Effective ways to enable users to upload files in a React Native app

Being in the process of developing a react native app, I am faced with the challenge of allowing users to easily upload files from their mobile devices (pdf, doc, etc). Unfortunately, my search for a suitable native component has proven fruitless. Can anyo ...

cssjavascriptreact-native

Easily transform arrays into objects by dynamically changing the keys

I have a comma-separated list that looks like this: var arr = [1,2,3,4] and I want to transform it into the following format: var new_arr = [ {x:1, y:2}, {x:3, y:4} ] I'm having trouble figuring out how to achieve this key/value transformation. ...

javascriptarraysobject

What is the method for incorporating PHP's header() function within PayPal JavaScript code?

I'm currently working on integrating Paypal with my website and I've run into some issues handling the various messages sent by Paypal, such as success, failed, and cancelled transactions. Below is a snippet of the Paypal JS code where it manage ...

javascriptphppaypal

When attempting to change an image using JavaScript, the image fails to load

I am having trouble understanding what is wrong with my code. <html> <body> <script type="text/javascript"> function changeImage() { var image = document.getElementById('myImage'); if (image.src.match("bulbon")) { ...

javascriptjquerycsshtml

Determine the mean value from an array of JSON objects in an asynchronous manner

Can you help me calculate the average pressure for each device ID in this JSON data set? [ { "deviceId": 121, "Pressure": 120 }, { "deviceId": 121, "Pressure": 80 }, { "deviceId": 130, "P ...

javascriptarraysnode.jsjsonasynchronous

PHP implementation of a webpage supporting multiple languages

I encountered an issue while creating a multi-lingual page successfully. I utilized CssFlipper to generate the RTL Bootstrap file and everything was functioning perfectly, except for the fact that when I switch the language to Arabic, the slider on the pag ...

phphtmlcsstwitter-bootstrapbootstrap-4

What is the method for converting a JSON file into an array list?

I am looking to convert my JSON file into an arraylist that can be utilized to showcase the information on a webpage. Here is my HTML file snippet: var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if(this.readyState == 4 &a ...

javascriptjson

How can we replicate user input in React for unit testing purposes?

Struggling to unit test a React component that accepts user input, specifically the onChange function within the component. Unable to set the input value despite trying various methods found online. Below is the component under test: class Input extends C ...

javascriptunit-testingreactjsjestjsenzyme

Create a jQuery animation that mimics the Safari home page experience. Create a

Is there a way to achieve a similar effect as Safari's new tab using HTML5 canvas instead of CSS3 3d transform? While we can create a similar transformation with CSS3 3D transform, it is limited to Webkit browsers. Can we use CANVAS to replicate this ...

jqueryhtmlcsscanvas

It seems like there may be an issue with the React Table Pagination in reactjs

As a newcomer to React JS, I have been utilizing react-table to create a component that can filter, sort, and paginate sample data from a JSON file. If you are interested in the tutorial I am following, you can find it here: Currently, I am encountering ...

javascripthtmlreactjsfrontend

Utilizing multiple optional key values in Vue Router

When working with vue-router, I am faced with the challenge of creating a route that can handle multiple optional parameters. For example, the route needs to be able to handle scenarios like: /something/a/1/b/2/c/3 /something/a/1/b/2 /something/a/1/c/3 /s ...

javascriptvue.jsvue-router

Load HTML 5 video on a webpage after all other elements have finished loading

Hello there! I'm trying to figure out a way to load an HTML 5 video after the page has already loaded. Currently, the video pauses all site interaction until it's fully loaded, but I'd prefer to have it display an image first and then autopl ...

jqueryhtmlhtml5-video

Do I have to include the HTML audio type when writing code?

Do we really need to specify the audio type in HTML, such as .mp3? I tried it without specifying the audio type and it seems to work just fine. So why is it important to include it? ...

htmlaudiotypes

Display and animate a div when hovered over inside a wrapper element

I have a unique challenge with an image gallery that I'm working on. Each image is enclosed within a box, and I am looking to incorporate hidden icons on the right and left sides of the box. These icons should not be visible to the user, but rather ap ...

jqueryhtmlcss

Creating a universal App Namespace using Require.js and Backbone

I'm new to working with Require.js and I've encountered a problem that I initially thought would be simple, but it's turning out to be quite challenging. My goal is to create a global namespace for my Backbone application and load it as a m ...

javascriptbackbone.jsrequirejsmarionetteamd

Accessing the locally stored data and displaying it in ng-bind

My journey to learn javascript through this project has hit a roadblock. I have stored an exchange rate in local storage: localStorage.gbpUSD = "1.42746"; Now, I want to utilize it instead of the hardcoded exchange rate in the code below... <input t ...

javascriptangularjsionic-frameworklocal-storagecurrency