Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
Hi all,
I had a similar issue in the past, the css/app.css was not loading images. The issue was my css was capitalized 'CSS' but not capitalized in the <link>. Once adjusted the images loaded correctly.
This time I made sure to name both the directory and <link> in lower case 'css' but the images are not loading again :(
When I inspect in chrome I am seeing the following error Failed to load resource: the server responded with a status of 404 () image name sample.svg:1 This is occurring for all photos.
Also, strangely I have an SVG logo in my header that loads correctly in all pages except one, which is broken, I have no idea why that is.
Anyhow I will post my code below any direction or suggestions would be appreciated.
app.layout
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Famijam') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
<div class="container">
<a href="/"><img src="/images/FamiJam.svg"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Contact</a>
</li>
</ul>
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ml-auto">
<!-- Authentication Links -->
@guest
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
</li>
@if (Route::has('register'))
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
</li>
@endif
@else
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="posts/create">Create Post</a>
<a class="dropdown-item" href="/posts">All Posts</a>
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
@csrf
</form>
</div>
</li>
@endguest
</ul>
</div>
</div>
</nav>
<main class="py-4">
@yield('content')
</main>
</div>
</body>
</html>
<footer class="footer">
<div class="container-fluid h-100 bg-white">
<div class="row h-100 ">
<div class="col mt-3 mb-3 d-flex justify-content-center align-items-center">
<a href="https://famijam.com" class="m-2">
<i class="fas fa-globe"></i></a>
<a href="https://twitter.com/p_trulli" class=" m-2">
<i class="fab fa-twitter"></i></a>
<a href="https://github.com/PT-83" class="m-2">
<i class="fab fa-github"></i></a>
<small class="justify-content-center m-2"> © 2020, FamiJam</small>
</div>
</div>
</div>
</footer>
Welcome page
@extends('layouts.app')
@section('content')
<div class="container h-100">
<div class="row h-100 justify-content-center align-items-center">
<div class="col">
<h1 class="mb-3 text-center display-3 text-secondary">Document Family Traditions</h1>
</div>
</div>
<div class="container h-100">
<div class="row h-100 justify-content-center align-items-center">
<div class="col">
<h3 class="mt-3 text-secondary">Family is important, and so are the many experiences we want to remember! Welcome to Famijam. A place to document any family tradition or memory!!! </h3>
</div>
<div class="col text-center">
<img src="/images/love.svg" class="img-fluid" alt="Responsive image">
</div>
</div>
<div class="container h-100">
<div class="row h-100 justify-content-center align-items-center">
<div class="col text-center">
<img src="/images/fun.svg" class="img-fluid" alt="Responsive image">
</div>
<div class="col">
<h3 class="mt-3 text-secondary">Why is this important you ask? Simply. Family won't be around forever, what better than to document things you don't want to forget, so when desired you can reflect back at that funny moment, family photographs or to show your kids or grandkids! </h3>
</div>
</div>
<div class="container h-100">
<div class="row h-100 justify-content-center align-items-center">
<div class="col">
<h3 class="mt-3 text-secondary">What kind of things should you submit? Our answer, anything you desire. Homemade recipes, favourite jokes, stories, experiences photographs and alike.
</h3>
</div>
<div class="col text-center">
<img src="/images/photo.svg" class="img-fluid" alt="Responsive image">
</div>
</div>
</div>
<div class="container h-100 mt-5">
<div class="row h-100 justify-content-center align-items-center">
<div class="col-6">
<h2 class="d-flex">Ready to Join?</h2>
<h2 class="text-primary"> Start By Signing Up </h2>
<a class=" mt-3 btn btn-primary btn-lg btn-block" href="/register" role="button">Sign Up</a>
</div>
</div>
</div>
@endsection
You have to be more carefully.
For example https://famijam.com/images/Love.svg works, but not https://famijam.com/images/love.svg
So this
<img src="/images/love.svg" class="img-fluid" alt="Responsive image">
Should be
<img src="/images/Love.svg" class="img-fluid" alt="Responsive image">
Check the names in uppercase and lowercase letters in the pictures.
@michaloravec Thank you so much, you have been a great help on many subjects!!!
Please or to participate in this conversation.