Images not displaying at all on mobile, but work fine on desktop

My images are displaying correctly on desktop but not on mobile. If you request desktop site on mobile browser, they show.

Any thoughts?

Here is the website: Website here

here is the html head code outputted by the blade template:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">



    <meta http-equiv="Content-Security-Policy"

content="default-src 'self'; img-src 'self'; style-src 'self' *.fontawesome.com https://fonts.gstatic.com https://fonts.googleapis.com; font-src 'self' *.fontawesome.com https://fonts.gstatic.com;

script-src 'self' https: 'unsafe-eval' 'nonce-EDNnf03nceIOfn39fn3e9h3sdfa' *.pusher.com; connect-src 'self' *.pusher.com wss://ws-eu.pusher.com;"

>

    <!-- CSRF Token -->

    <meta name="csrf-token" content="qib265IRboiaWoQEKLlPEta69HaxCmxPqz1bBAOQ">



    <title>Crypto Bids</title>

    <link rel="shortcut icon" href="https://www.crypto-bids.co.uk/images/bids-favicon.png">



    <!-- Styles -->

    <link href="https://www.crypto-bids.co.uk/css/app.css" rel="stylesheet">

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" integrity="sha384-3AB7yXWz4OeoZcPbieVW64vVXEwADiYyAEhwilzWsLw+9FgqpyjjStpPnpBO8o8S" crossorigin="anonymous">



    <link href="https://www.crypto-bids.co.uk/css/layout.css" rel="stylesheet">

    <link src="https://www.crypto-bids.co.uk/css/cookieconsent.css" rel="stylesheet" />

    <link href="https://www.crypto-bids.co.uk/css/cart.css" rel="stylesheet">

<link href="https://www.crypto-bids.co.uk/css/flipclock.css" rel="stylesheet">



    <script src="https://www.crypto-bids.co.uk/js/head.js"></script>

</head>

And here is an example of an image:

<a class="navbar-brand" href="/">

    <img src="https://www.crypto-bids.co.uk/images/logo-top-beta.png" />

</a>

and, how it appears in the b;lade template:

<a class="navbar-brand" href="/">

    <img src="{{ asset('/images/logo-top-beta.png') }}" />

</a>

If i visit the image URL directly, the image shows, but not on the page itself - my brain is telling me it could be something in the <head> tags.

I have been scratching my head over this for a while now, anyone got any ideas?

asked Nov 20 at 18:55

The-WebGuy

16213

add a comment |

My images are displaying correctly on desktop but not on mobile. If you request desktop site on mobile browser, they show.

Any thoughts?

Here is the website: Website here

here is the html head code outputted by the blade template:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">



    <meta http-equiv="Content-Security-Policy"

content="default-src 'self'; img-src 'self'; style-src 'self' *.fontawesome.com https://fonts.gstatic.com https://fonts.googleapis.com; font-src 'self' *.fontawesome.com https://fonts.gstatic.com;

script-src 'self' https: 'unsafe-eval' 'nonce-EDNnf03nceIOfn39fn3e9h3sdfa' *.pusher.com; connect-src 'self' *.pusher.com wss://ws-eu.pusher.com;"

>

    <!-- CSRF Token -->

    <meta name="csrf-token" content="qib265IRboiaWoQEKLlPEta69HaxCmxPqz1bBAOQ">



    <title>Crypto Bids</title>

    <link rel="shortcut icon" href="https://www.crypto-bids.co.uk/images/bids-favicon.png">



    <!-- Styles -->

    <link href="https://www.crypto-bids.co.uk/css/app.css" rel="stylesheet">

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" integrity="sha384-3AB7yXWz4OeoZcPbieVW64vVXEwADiYyAEhwilzWsLw+9FgqpyjjStpPnpBO8o8S" crossorigin="anonymous">



    <link href="https://www.crypto-bids.co.uk/css/layout.css" rel="stylesheet">

    <link src="https://www.crypto-bids.co.uk/css/cookieconsent.css" rel="stylesheet" />

    <link href="https://www.crypto-bids.co.uk/css/cart.css" rel="stylesheet">

<link href="https://www.crypto-bids.co.uk/css/flipclock.css" rel="stylesheet">



    <script src="https://www.crypto-bids.co.uk/js/head.js"></script>

</head>

And here is an example of an image:

<a class="navbar-brand" href="/">

    <img src="https://www.crypto-bids.co.uk/images/logo-top-beta.png" />

</a>

and, how it appears in the b;lade template:

<a class="navbar-brand" href="/">

    <img src="{{ asset('/images/logo-top-beta.png') }}" />

</a>

If i visit the image URL directly, the image shows, but not on the page itself - my brain is telling me it could be something in the <head> tags.

I have been scratching my head over this for a while now, anyone got any ideas?

asked Nov 20 at 18:55

The-WebGuy

16213

add a comment |

My images are displaying correctly on desktop but not on mobile. If you request desktop site on mobile browser, they show.

Any thoughts?

Here is the website: Website here

here is the html head code outputted by the blade template:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">



    <meta http-equiv="Content-Security-Policy"

content="default-src 'self'; img-src 'self'; style-src 'self' *.fontawesome.com https://fonts.gstatic.com https://fonts.googleapis.com; font-src 'self' *.fontawesome.com https://fonts.gstatic.com;

script-src 'self' https: 'unsafe-eval' 'nonce-EDNnf03nceIOfn39fn3e9h3sdfa' *.pusher.com; connect-src 'self' *.pusher.com wss://ws-eu.pusher.com;"

>

    <!-- CSRF Token -->

    <meta name="csrf-token" content="qib265IRboiaWoQEKLlPEta69HaxCmxPqz1bBAOQ">



    <title>Crypto Bids</title>

    <link rel="shortcut icon" href="https://www.crypto-bids.co.uk/images/bids-favicon.png">



    <!-- Styles -->

    <link href="https://www.crypto-bids.co.uk/css/app.css" rel="stylesheet">

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" integrity="sha384-3AB7yXWz4OeoZcPbieVW64vVXEwADiYyAEhwilzWsLw+9FgqpyjjStpPnpBO8o8S" crossorigin="anonymous">



    <link href="https://www.crypto-bids.co.uk/css/layout.css" rel="stylesheet">

    <link src="https://www.crypto-bids.co.uk/css/cookieconsent.css" rel="stylesheet" />

    <link href="https://www.crypto-bids.co.uk/css/cart.css" rel="stylesheet">

<link href="https://www.crypto-bids.co.uk/css/flipclock.css" rel="stylesheet">



    <script src="https://www.crypto-bids.co.uk/js/head.js"></script>

</head>

And here is an example of an image:

<a class="navbar-brand" href="/">

    <img src="https://www.crypto-bids.co.uk/images/logo-top-beta.png" />

</a>

and, how it appears in the b;lade template:

<a class="navbar-brand" href="/">

    <img src="{{ asset('/images/logo-top-beta.png') }}" />

</a>

If i visit the image URL directly, the image shows, but not on the page itself - my brain is telling me it could be something in the <head> tags.

I have been scratching my head over this for a while now, anyone got any ideas?

asked Nov 20 at 18:55

The-WebGuy

16213

My images are displaying correctly on desktop but not on mobile. If you request desktop site on mobile browser, they show.

Any thoughts?

Here is the website: Website here

here is the html head code outputted by the blade template:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">



    <meta http-equiv="Content-Security-Policy"

content="default-src 'self'; img-src 'self'; style-src 'self' *.fontawesome.com https://fonts.gstatic.com https://fonts.googleapis.com; font-src 'self' *.fontawesome.com https://fonts.gstatic.com;

script-src 'self' https: 'unsafe-eval' 'nonce-EDNnf03nceIOfn39fn3e9h3sdfa' *.pusher.com; connect-src 'self' *.pusher.com wss://ws-eu.pusher.com;"

>

    <!-- CSRF Token -->

    <meta name="csrf-token" content="qib265IRboiaWoQEKLlPEta69HaxCmxPqz1bBAOQ">



    <title>Crypto Bids</title>

    <link rel="shortcut icon" href="https://www.crypto-bids.co.uk/images/bids-favicon.png">



    <!-- Styles -->

    <link href="https://www.crypto-bids.co.uk/css/app.css" rel="stylesheet">

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" integrity="sha384-3AB7yXWz4OeoZcPbieVW64vVXEwADiYyAEhwilzWsLw+9FgqpyjjStpPnpBO8o8S" crossorigin="anonymous">



    <link href="https://www.crypto-bids.co.uk/css/layout.css" rel="stylesheet">

    <link src="https://www.crypto-bids.co.uk/css/cookieconsent.css" rel="stylesheet" />

    <link href="https://www.crypto-bids.co.uk/css/cart.css" rel="stylesheet">

<link href="https://www.crypto-bids.co.uk/css/flipclock.css" rel="stylesheet">



    <script src="https://www.crypto-bids.co.uk/js/head.js"></script>

</head>

And here is an example of an image:

<a class="navbar-brand" href="/">

    <img src="https://www.crypto-bids.co.uk/images/logo-top-beta.png" />

</a>

and, how it appears in the b;lade template:

<a class="navbar-brand" href="/">

    <img src="{{ asset('/images/logo-top-beta.png') }}" />

</a>

If i visit the image URL directly, the image shows, but not on the page itself - my brain is telling me it could be something in the <head> tags.

I have been scratching my head over this for a while now, anyone got any ideas?

html laravel-5.6

asked Nov 20 at 18:55

The-WebGuy

16213

asked Nov 20 at 18:55

The-WebGuy

16213

asked Nov 20 at 18:55

The-WebGuy

16213

asked Nov 20 at 18:55

The-WebGuy

16213

asked Nov 20 at 18:55

The-WebGuy

16213

add a comment |

1 Answer
1

active

oldest

votes

this is not truly an answer, but an update. The problem just magically went away after hours of comparing html code - very very odd

answered Nov 21 at 23:35

The-WebGuy

16213

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53399723%2fimages-not-displaying-at-all-on-mobile-but-work-fine-on-desktop%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

this is not truly an answer, but an update. The problem just magically went away after hours of comparing html code - very very odd

answered Nov 21 at 23:35

The-WebGuy

16213

add a comment |

this is not truly an answer, but an update. The problem just magically went away after hours of comparing html code - very very odd

answered Nov 21 at 23:35

The-WebGuy

16213

add a comment |

this is not truly an answer, but an update. The problem just magically went away after hours of comparing html code - very very odd

answered Nov 21 at 23:35

The-WebGuy

16213

this is not truly an answer, but an update. The problem just magically went away after hours of comparing html code - very very odd

answered Nov 21 at 23:35

The-WebGuy

16213

answered Nov 21 at 23:35

The-WebGuy

16213

answered Nov 21 at 23:35

The-WebGuy

16213

answered Nov 21 at 23:35

The-WebGuy

16213

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Tukukkk