What could be causing my images to load only on desktop and not on mobile devices?

As I work on developing a web application, I encountered a peculiar issue. On my desktop browser, the images load perfectly fine. However, when I try to access the site using my mobile browser, all I see is a gray outline of the image.

If you'd like to test this bug yourself, simply choose "Alien" from the dropdown menu named "Shape:", then click on "clear and apply". Finally, tap on any of the black squares. You'll notice that it transforms into an alien head on a desktop browser, but fails to do so on a mobile browser.

Feel free to check out the live site here.

You can also view the code on Codepen here.

.alienItem {
      content: url(/images/alien.png);
      height: 55px;
      width: 55px;
      justify-self: center;
      border-radius: 50px;
      margin-top: 5px;
}  

Please note that while the Codepen link does not include the image files, it may help you in troubleshooting the issue.

Answer №1

It appears that your link is directing to the incorrect location. Your website is currently being hosted at

https://zjcrumpton.github.io/tokeneconomy/
. The links you have included are using a starting slash (/images/alien.png), which means they will be relative to the base URL and resolve to
https://zjcrumpton.github.io/images/alien.png
, where the file does not exist.

Since all assets are located within

https://zjcrumpton.github.io/tokeneconomy/
, it is recommended to link to /tokeneconomy/images/alien.png or remove the starting slash, or use ./images/alien.png as an alternative solution.

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

How can I dynamically populate my select field with JSON data using React.js?

My goal is to fetch data from an API and use the 'symbol' JSON field as options for a select dropdown. However, I'm encountering an issue: 'TypeError: Cannot read property 'length' of undefined.' Beneath my code, I' ...

Verify whether a radio button has been chosen

I need help with implementing a show and hide function on my website. My goal is to display a pay button only after a "package type" has been selected by the user. Unfortunately, I am having trouble getting this feature to work properly. This is the HTM ...

Managing conditional filters in MySQL

I am currently utilizing node.js to perform a query based on multiple filters that must all be true. select * from orders ${isFilter ? 'where' : ''} ${orderId !== undefined && orderId ? `order_id = '${orderId}' or ...

Steps for positioning one div below another:1. Set the position property

Indeed, I am aware that this question has been asked numerous times in the past. Despite trying other solutions, none seem to resolve my issue. My objective is to have the "register" div slide down beneath the "container" div, rather than appearing next t ...

AngularJS use of absolute path for URL redirection

How do I direct a user to an absolute URL in AngularJS? For instance, if I have a page at my current URL (http://example.com/submit), and when the user clicks a button on the webpage, they need to be redirected to a different webpage like (''). ...

Navigating through a 3D world with just the tilt of

I am currently developing an immersive VR web application using three.js. I have integrated the device orientation controls from the Google Cardboard three.js demo for camera navigation. Now, I am looking to incorporate keyboard controls for additional fu ...

Creating layers of object declarations

Looking for assistance on the code snippet below. type Item = { id: number; size: number; } type Example = { name: string; items: [ Item ]; } var obj: Example = { name: "test", items: [ { i ...

Concealing Angular Flexslider until it is entirely loaded

I'm having trouble getting my angular flexslider to display images smoothly. Currently, the images take a moment to load and it doesn't look great. I'd like them to fade in once everything is fully loaded. How can I achieve this? I've t ...

Issue with VueJS v-for when using dynamic components causing unexpected behavior

Within one of my components, the syntax I am using is as follows: <event-item v-for='(event, index) in events' :is='eventComponent(event)' :key="'event-' + index" :event='event&apos ...

Prevent Second Division from wrapping around floated Division

I am running into a minor issue with the positioning of a div in my current project. +------------------------+ |+-------+ ~~~~ TITLE| <--how can I prevent text from wrapping around || | ~~~~~~~~~~~~~ |\ on the left ...

Tips for customizing the event target appearance in Angular 2?

After following the steps outlined in this particular blog post (section 3, event binding), I successfully added an event listener to my component class. I can confirm that it responds when the mouse enters and exits. <p class="title" (mouseenter)="unf ...

Retrieving CSS style values with Node.js

I am looking to design a new CSS style that includes the lowest and highest values. table[my-type="myStyle"] { width: 255.388px !important; } This code snippet is included in numerous CSS files within my style directory. ...

Struggling to make justifyContent function properly when using flexbox in conjunction with material ui

I need assistance with returning JSX to the title prop of a material-ui card component. My goal is to have two boxes displayed with space between them, one on the left side and one on the right side of the header. Using flex box, I am able to display the ...

Clear out duplicate elements from array instruction

I am currently working with a div that displays names and I need to remove any duplicates from my array. I have successfully achieved this with a filter, but now I would like to explore creating a directive to extend this functionality. <div ng-control ...

Create your own custom block on the frontend product page

I am trying to create a custom block on the Product Page of my Magento store. I attempted it like this: Magento- How can i add a new custom block in product details page using module Unfortunately, it did not work as expected. Did I make any mistakes he ...

dissecting mongo queries using nodes

I am thinking about organizing my mongo db queries into a separate js file to make it easier to reuse the code. I have tried the format below but it doesn't seem to work. Does anyone have any suggestions on how I could accomplish this? queries.js va ...

Omit a particular road from the navigation route using HERE maps

Can JavaScript be used to avoid certain preset coordinates in HERE maps while navigating? ...

Results that stand out: Mongoose's uniqueness

I am in search of a solution to create a query that can fetch results from my mongo database while excluding any duplicate field values. Here's the scenario: I am retrieving numerous results from the Spotify API and saving them in my database. Howeve ...

Position the link to the right of the menu using CSS styling

I'm attempting to position a link next to my menu using CSS, but due to my limited experience with CSS I'm struggling to achieve the desired result. Currently, the link appears at the bottom left of the menu section. The code for the menu and lin ...

Hide the parent element without affecting its child element using jQuery

Is it possible to hide only the parent element of a child element without hiding the child element itself? I attempted to achieve this by using the following code: <div class="bordered"> <div class="banner-outer"> ...