404 error img - Исправление ошибок и поиск оптимальных решений проблем

here’s a confusing thing. first look at the hierarchy of my folders and etc. and see that I have my image, «cribbage.png» under the images folder. I am trying to access this image with the following code in index.html:`

<!doctype html>
<html lang = "en">
    <head>

    </head>
    <body>
        <h1>Hello World! </h1>
        <img src= "images/cribbage.png" width= "970" height="224"/>
        <div id = "future"></div>
        <form id = "form" id = "chat_form">
            <input id = "username" type="text">
            <input type = "submit" value="Play">
        </form>
        <script src = "/jquery/dist/jquery.js"></script>
        <script src = "/socket.io/socket.io.js">
    </body>
</html>

and yet, when loading the website I get
the following and the image is replaced with the broken image icon.

What exactly is wrong here?

asked Mar 12, 2018 at 13:32

The images field is not on the same folder as index.html. Meaning your path should get out of the node_modules folder and then get in the images folder.

you should use / (to get out of the node folder) images and then/ (to get in the images folder )cribbage.png

so ../images/cribbage.png

answered Mar 12, 2018 at 13:39

check on the folder that the name of the image is in lowercase because it is case sensitive

answered May 2, 2019 at 3:50

I have noticed that some web frameworks don’t allow you to have your images or videos anywhere you want. For example, while looking for the solution for this problem, I remembered that Flask (the framework I was using) does not render any images or videos that are not in the «static» folder.

I don’t know if other frameworks have something like this, but if you think you have everything in order, you should take this into consideration.

answered Jul 19, 2022 at 19:50

MarioMario

111 bronze badge

try:

<img src= "/images/cribbage.png" width= "970" height="224"/>

answered Mar 12, 2018 at 13:36

Is the images folder in the right place?
Make sure you can access to the folder from the browser.

answered Aug 20, 2019 at 6:44

grape100grape100

1852 silver badges10 bronze badges

<form id="form1" runat="server">
<div>
<img src="../../../Images/Gallery/error2.jpg"  width= "500" height="300" CssStyle="text-align:center"/>
</div>
</form>
</asp:Panel>

answered Nov 20, 2019 at 7:11

In my case, I had too many folders e.i img/images, so I moved all my images from images folder to img folder, and all my images show successfully

answered Nov 22, 2020 at 14:05

you should try this
<img src= "./images/cribbage.png" width= "970" height="224"/>

answered Nov 22, 2020 at 14:14

Источник

Img tag loading image 404 error solution

I. Introduction

In development, when you use <img src = «/img/yys.png» /> to load a picture, there will be a 404 error, that is, the picture does not find the problem.

NowwillSolution Summarized as follows:

Second, the solution

When the image is not found or 404, the <img /> tag’s onerror property is triggered to display the image.


    1, direct spelling path:

    <img src = "img/yys.png" onerror = "javascript:this.src = 'img/default.png'" />


         2, event binding method:

    <img src = "img/yys.png" onerror = "javascript:getImage('img/default.png')" />

    function getImage(imgUrl) {
  
        var img = event.srcElement;

        img.src = imgUrl;

    }

    

  ------------------------------------- ↓↓↓↓↓ -------------------------------------

         Special Note: If the default image (img/default.png) does not exist, how to solve it:
    
    <img src = "img/yys.png" onerror = "this.onerror = ''; this.src = 'img/default.png'" />

  ------------------------------------- ↑↑↑↑↑ -------------------------------------

Now ~ ~ ~Write it here, it will be finished. If you are fortunate enough to help you, please pay attention to me and witness our growth together.。

Источник

Tonia_

1 / 1 / 0

Регистрация: 09.03.2018

Сообщений: 30

01.05.2020, 13:34. Показов 5743. Ответов 4

Метки express, html, img (Все метки)

Я смотрела похожу тему на форуме (Не хочет загружать img в HTML документе), но у меня немного по другому. Помогите разобраться в чем ошибка. Почему картинка не загружается?

about.ejs

HTML5

<!DOCTYPE html>
<html>
<head>
    <title>Открытка</title>
    <meta charset="utf-8" />
</head>
<body>
    <div >
         // .....
        <p><img src="/images/pic.png" alt="картинка"></p>
        // .....
    </div>
</body>
</html>

Сервер (app.js):

Javascript

const express = require("express");
const bodyParser = require("body-parser");
  
const app = express();
var path = require('path');
 
const urlencodedParser = bodyParser.urlencoded({extended: false});
app.set('view engine','ejs');
 
// app.use('/images',express.static('public')); // не работает
 
app.post("/register", urlencodedParser, function (request, response) {
    if(!request.body) return response.sendStatus(400);
    console.log(request.body);
    response.render('about',{date: request.body});
});
  
app.get("/", function(request, response){
    response.render('register');
});
 
app.listen(3000);

Изображения

__________________
Помощь в написании контрольных, курсовых и дипломных работ, диссертаций здесь

2 / 2 / 0

Регистрация: 01.05.2020

Сообщений: 13

02.05.2020, 11:44

В строке № 10 html файла перед images убери слеш

1 / 1 / 0

Регистрация: 09.03.2018

Сообщений: 30

02.05.2020, 12:27

[ТС]

Не загружается(
Failed to load resource: the server responded with a status of 404 (Not Found)

shvyrevvg

1786 / 1036 / 445

Регистрация: 12.05.2016

Сообщений: 2,550

02.05.2020, 19:14

Сообщение было отмечено Tonia_ как решение

Решение

Tonia_,

Javascript

1	app.use(express.static(__dirname + '/images'));

HTML5

1	<img src="/pic.png" alt="картинка">

1 / 1 / 0

Регистрация: 09.03.2018

Сообщений: 30

03.05.2020, 05:09

[ТС]

Работает!)
Спасибо

IT_Exp Эксперт 87844 / 49110 / 22898 Регистрация: 17.06.2006 Сообщений: 92,604	03.05.2020, 05:09
5

Источник

Решение ошибки 404 при загрузке изображений в тег img

Введение

Во время разработки при загрузке изображения с помощью <img src = «/img/yys.png» /> будет ошибка 404, что означает, что изображение не найдено.

ПодарокбудуРешение Резюмируется следующим образом:

Во-вторых, решение

Если изображение не найдено или 404, атрибут onerror тега <img /> будет активирован для отображения изображения в нем.


    1. Прямое написание пути:

    <img src = "img/yys.png" onerror = "javascript:this.src = 'img/default.png'" />


         2. Метод привязки событий:

    <img src = "img/yys.png" onerror = "javascript:getImage('img/default.png')" />

    function getImage(imgUrl) {
  
        var img = event.srcElement;

        img.src = imgUrl;

    }

    

  ------------------------------------- ↓↓↓↓↓ -------------------------------------

         Специальное примечание: если изображение по умолчанию (img / default.png) не существует, как его решить:
    
    <img src = "img/yys.png" onerror = "this.onerror = ''; this.src = 'img/default.png'" />

  ------------------------------------- ↑↑↑↑↑ -------------------------------------

Now ~ ~ ~Я закончил писать здесь, если вам посчастливилось помочь вам, пожалуйста, не забудьте следовать за мной и стать свидетелем нашего совместного роста。

Источник

Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

Для скачивания исходных файлов необходимо авторизоваться под своим аккаунтом через соответствующую форму.

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

⯈

Устанавливаем графический редактор GIMP

Выбор графического редактора
Устанавливаем программу GIMP
Устанавливаем Руководство пользователя

Здравствуйте уважаемый посетитель!

При создании и развитии сайта не обойтись без графического редактора. Этот инструмент необходим для формирования и обработки различных графических элементов, без которых сайт попросту не сможет существовать. Поэтому в наборе инструментов вебмастера графический редактор занимает важнейшее место.

В статье Устанавливаем бесплатный графический редактор GIMP речь пойдет о бесплатной программе GIMP, которая позволяет в полной мере решать вопросы по созданию элементов дизайна веб-страниц. И будет показано, как ее установить на локальный компьютер.

Кроме того здесь можно будет посмотреть, как в этот редактор добавить встроенное «Руководство пользователя», а также приведен бесплатный видеокурс, где можно поближе с ним познакомиться.

Для тех же, кто хочет заниматься дизайном на платном Adobe Photoshop (фотошоп), здесь также упомянут и такой вариант, основанный на использовании продления льготного бесплатного периода фотошопа на неопределенное время…

Cайт на практическом примере

Здесь можно посмотреть текущее состояние сайта, создаваемого в рамках цикла статей Самописный сайт с нуля своими руками.

Исходные файлы данного сайта можно скачать из прилагаемых к статьям дополнительных материалов.

Предыдующая статья: Обработка ошибок PHP и статуса 404 HTTP

2019-11-12

Здравствуйте, уважаемый посетитель!

Сегодня рассмотрим практические действия по созданию собственной, так называемой, пользовательской страницы 404, которая должна отображаться в случаях перехода пользователя на несуществующий ресурс сайта.

Рекомендации по созданию страницы с ошибкой 404 Not found
Создаем каркас страницы и оформляем основное ее содержание
Перенаправляем запросы с ошибкой на страницу 404
Исходные файлы сайта

Создаем каркас страницы и оформляем основное ее содержание

Страница 404 и ее подобные, предназначенные для вывода информации об ошибках, в отличие от обычных динамических страниц, не формируются посредством шаблона, а создаются непосредственно в отдельных файлах.

Поэтому в первую очередь создадим в корне сайта файл с именем, соответствующему данному случаю, например «page_404.php». Как создать новый файл ранее показывалось здесь. После чего можно перейти и к написанию кода страницы, определив ее структуру и содержание.

Как выше было сказано, примеров использования страниц 404 множество. Мы же за основу возьмем вариант, при котором в ее структуру будут включены некоторые общие блоки сайта, такие как шапка и футер.

А в области основного содержания вместо контента будет размещено сообщение об ошибке, ее краткое описание со ссылкой на Главную страницу и форма поиска по сайту с возможностью нахождения нужного ресурса по заданным ключевому слову, фразе или URL веб-страницы.

В результате дизайн такой страницы будет полностью поддерживать единый стиль сайта, но существенно отличаться от обычных страниц. При этом пользователю будет предоставлена возможность в один клик использовать имеющиеся разделы через меню, расположенное в шапке и футере сайта или использовать поиск для нахождения нужного контента.

Для реализации вышесказанного ниже показан код, который получен путем исключения из шаблона главной страницы лишних, не используемых в этом случае, блоков.

kak-sdelat-sobstvennuyu-stranicu-404_1

Рис.1 Файл «page_404.php» с кодом страницы 404

А далее следует создать файл block_404.php, подключаемый инструкцией require_once «blocks/block_404.php»;?> в строке 39 (рис.1), в котором будет размещаться основное содержание страницы.

class=«error-empty»>
src=«/images/page_404/page_404.png» alt=«Страница 404»>

Ошибка 404

К сожалению, запрашиваемая страница не найдена. Но это не причина покинуть сайт.

Если вы вводили адрес страницы самостоятельно, то пожалуйста, проверьте, не было ли ошибки. После чего повторите запрос.

В любом случае для поиска нужной информации вы можете использовать любые доступные разделы через меню сайта или href=»/»>Главную страницу. Либо воспользоваться поиском по сайту.

Поиск по сайту

Ключевое слово / фраза / URL страницы:

class=«ya-site-form ya-site-form_inited_no» onclick=«return {‘action’:’https://avtobezugona.ru/poisk.html’,’arrow’:false,’bg’:’transparent’,’fontsize’:16,’fg’:’#000000′,’language’:’ru’,’logo’:’rb’,’publicname’:’Введите запрос’,’suggest’:true,’target’:’_self’,’tld’:’ru’,’type’:2,’usebigdictionary’:true,’searchid’:2301097,’input_fg’:’#000066′,’input_bg’:’#fdfadc’,’input_fontStyle’:’normal’,’input_fontWeight’:’normal’,’input_placeholder’:’Введите запрос’,’input_placeholderColor’:’#5f5f5f’,’input_borderColor’:’#eaeaea’}»>

action=«https://yandex.ru/search/site/» method=«get» target=«_self» accept-charset=«utf-8»>

type=«hidden» name=«searchid» value=«2301097»/>

type=«hidden» name=«l10n» value=«ru»/>

type=«hidden» name=«reqenc» value=«»/>

type=«search» name=«text» value=«» placeholder=«Введите запрос»/>

type=«submit» value=«Найти»/>

Рис.2 Блок основного содержания в файле «block_404.php»

Где в качестве элемента поиска применен тот же блок (поз.11÷26), который ранее рассматривался при организации поиска на сайте. Более подробно об этом можно посмотреть в соответствующем разделе.

Кроме того здесь предусмотрено использование графического изображения src=«/images/page_404/page_404.png» alt=«Страница 404»> (поз.3). Поэтому необходимо также будет подобрать подходящую по теме готовую картинку или составить из каких-либо заготовок свою композицию. О том как это сделать можно посмотреть здесь.

В нашем случае возьмем в качестве заготовки скаченную с фотостока картинку, отражающую озабоченного человека у компьютера.

Рис.3 Полученная картинка с фотостока

И с помощью графического редактора дополним ее некоторыми подходящими по смыслу элементами, как показано ниже.

Рис.4 Изображение по теме ошибки 404

Таким образом блок основного содержания мы сформировали, и осталось только оформить внешний его вид под дизайн сайта с помощью стилей CSS. Ниже приведен фрагмент CSS-кода, относящегося к этой части страницы.

/*——Страница 404——*/
.error-block {
width:95%;
margin:0 auto 0 auto;
position:relative;
}
.error-empty {
min-height:1.875em;
}
.error-text {
display:block;
padding-right:0;
}
.error-img {
float:left;
width:30%;
display:block;
padding:0 1em .5em 0;
}
.error-img img{
width:100%;
}
.error-text h1{
font-size:1.5625em;
font-style:normal;
font-weight:normal;
color:#006;
font-family:’Comfortaa’, cursive;
text-shadow:1px 1px 0px #eee, 2px 2px 2px #222;
text-align:center;
margin-bottom:.5em;
}
.error-text p{
text-indent:1em;
color:#006;
padding-bottom:.25em;
font-size:0.9375em;
}
.error-text hr{
height:.0625em;
background:#bd072e;
margin:1em 0 1em 0;
box-shadow:0 0 .0625em 0 #bd072e;
}
@media only screen and (min-width: 600px) {
.error-text{
width:60%;
display:table-cell;
vertical-align:middle;
}
.error-img{
width:40%;
display:table-cell;
float:none;
vertical-align:middle;
padding:0 2em .5em 0;
}
.error-text p{
font-size:1em;
}
}
@media only screen and (min-width: 800px) {
.error-text{
width:65%;
}
.error-img{
width:35%;
padding:0 3em .5em 0;
}
}
@media only screen and (min-width: 1000px) {
.error-block{
width:83.33%;
}
}
@media only screen and (min-width: 1280px) {
.error-text p{
font-size:1.0625em;
}
}
@media only screen and (min-width: 1500px) {
.error-text p{
font-size:1.125em;
}
}
@media only screen and (min-width: 1700px) {
.error-text{
width:70%;
}
.error-img{
width:30%;
}
.error-text p{
font-size:1.1875em;
}
}

Рис.5 CSS-код блока основного содержания

Наверное, нет необходимости подробного рассмотрения данного кода, так как ранее мы не раз уже использовали приведенные здесь свойства. Стоит лишь отметить, что для фрагмента поиска по сайту (поз.11÷26 на рис.2) используются те же самые свойства, которые ранее были назначены для аналогичного блока, расположенного в сайдбаре (в этой таблице они не показаны).

А для адаптации страницы для разного разрешения, чтобы она выглядела надлежащим образом на всю ширину экрана во всем заданном диапазоне от 320px до 1920px, применено несколько медиа-запросов: для разрешения более 600px, 800px, 1000px, 1280px, 1500px и 1700px (поз.45÷96).

В приведенной таблице показана сквозная нумерация строк кода. Что касается позиций в каскадной таблице стилей CSS, находящейся в файле «main.css» исходных файлов сайта, то при необходимости, его фрагменты можно найти по следующим номерам строк: для разрешения менее 600px (поз.980÷1024), более 600px (поз.1597÷1611), более 800px (поз.1661÷1667), более 1000px (поз.1728÷1730), более 1280px (поз.1784÷1786), более 1500px (поз.1827÷1829) и более 1700px (поз.1853÷1861).

И теперь, после всех вышеприведенных преобразований можно посмотреть, что в итоге получилось. Для этого откроем созданную страницу 404 добавив в адресной строке браузера к доменному имени ее адрес /page_404.php. В начале сделаем это в обычном, десктопном варианте пользовательского устройства.

Рис.6 Вид созданной страницы 404

А вот так будет выглядеть страница при ее отображении на мобильном устройстве при малом разрешении экрана.

Рис.6 Вид страницы при малом разрешении экрана

Как видно, полученный результат отвечает всем требованиям, которые отмечались выше, в первой части статьи.

Таким образом мы создали собственную 404-ую страницу. Однако, этого не достаточно. Так как необходимо обеспечить еще и редирект (перенаправление) на нее в случае обработки запроса на несуществующий ресурс сайта.

Перенаправляем запросы с ошибкой на страницу 404

Так как на сайте применяется ЧПУ с перенаправлением запросов с помощью директив модуля MOD_REWRITE в файле .htaccess, то редирект на страницу 404 необходимо предусмотреть для двух вариантов:

Сервер выдает ошибку 404 (Not Found) в случае, если запрос не обрабатывается шаблоном правил RewriteRule модуля MOD_REWRITE и не найден соответствующий его адресу файл. В таких ситуациях редирект обеспечивается применением надлежащей директивы в файле .htaccess.
Запрос обработан правилом RewriteRule модуля MOD_REWRITE и перенаправлен в шаблон главной страницы в файл index.php. Но при дальнейшей его обработке не была обнаружена какая-либо существующая страница сайта. В этом случае редирект на страницу 404 выполняется средствами PHP.

Практический пример первого варианта можно сымитировать, если, например, допустить ошибку в расширении адреса страницы. В этом случае запрос не сможет быть обработан шаблоном правил RewriteRule модуля MOD_REWRITE.

Ниже показан пример отображения в браузере технической страницы 404 при обнаружении сервером ошибки Not Found в запросе на одну из страниц сайта newsite.local, установленном на локальном веб-сервере Open Server. В котором в расширении html ошибочно указано htm.

Рис.7 Ошибка 404 при неправильном расширении в URL

А для того, чтобы для таких случаях вместо технической страницы отображалась собственная страница 404, необходимо в файл .htaccess добавить следующую строку кода:

ErrorDocument 404 /page_404.php

Рис.8 Редирект 404 в файле .htaccess

В которой во второй части директивы ErrorDocument 404 выполняется перенаправление на нашу, созданную в предыдущей части статьи страницу 404 с адресом /page_404.php.

И теперь, если пользователь перейдет по этой ошибочной ссылке, то попадет уже не на техническую, а на пользовательскую страницу.

Рис.9 Редирект на страницу 404 через файл .htaccess

Как видно, в данном случае через редирект в файле .htaccess мы попали на ранее созданную нами страницу 404.

А теперь рассмотрим другой вариант, при котором при запросе на несуществующий ресурс сайта сервер не выдает ошибку Not Found, в случае, если он обрабатывается правилом RewriteRule модуля MOD_REWRITE и перенаправляется в файл index.php.

Сымитировать такую ситуацию можно, если, например, допустить какю-либо ошибку в адресе страницы при правильном указании расширения.

Ниже показан пример запроса на страницу «Контакты», в адресе которого допущена ошибка /kontbakty.html (лишний символ b).

Рис.10 Ошибка при неправильном адресе страницы

Здесь видно, что в этом случае сервер не выдает ошибку 404, так как запрос обрабатывается файлом index.php. Однако, динамическая страница с несуществующим адресом не смогла быть сформирована. И в области основного содержания станицы вместо контента отображается ошибка PHP (не найден соответствующий запросу файл, указанный в инструкции include_once, в строке 126 файла index.php).

И вот для того, чтобы в случае обнаружении каких-либо ошибок во время обработки запроса в файле index.php был обеспечен редирект на страницу 404, необходимо в PHP-код обработчика внести соответствующие изменения.

Ниже показан PHP-код обработчика запросов, расположенный в файле index.php, в котором в случае отсутствия в базе данных заданной страницы, происходит нужный редирект.

kak-sdelat-sobstvennuyu-stranicu-404_2

Рис.11 PHP-код обработчика запросов с редиректом на страницу 404

В данном коде проверка на наличие в базе данных записи, соответствующей заданной странице (поз.11÷23), выполняется с помощью вызова пользовательской функции getLineThreeColumnThreeСondition() (поз.18). Которая извлекает запись исходя из всех трех значений GET-параметров, сохраненных в массиве $get_array (поз.3÷9) и определяющих URL страницы: section ($get_array[2]), rubric ($get_array[1]) и page ($get_array[0]).

И в случае, если такой станицы не существует, то с помощью отправки HTTP заголовка header() (поз.21) производится редирект на страницу 404 с прекращением выполнения текущего скрипта exit (поз.22).

Если же заданный URL указан правильно, и такая страница существует, то выполняются дальнейшие действия по получению данных для формирования динамической страницы (поз.25÷53).

В итоге, после внесенных изменений в код обработчика, при выполнении запроса с ранее допущенной ошибкой, можно будет увидеть, что такой запрос также станет перенаправляться на страницу 404.

Рис.12 Редирект при неправильном адресе страницы

Таким образом мы выполнили все необходимые действия по обработке ошибки 404. А именно: создали собственную страницу 404 и получили механизм перенаправления при запросах на несуществующие ресурсы сайта для любых возможных ошибок, допущенных в URL-адресе.

В следующей статье мы сделаем то же самое, но уже для другого вида ошибок, а именно: ошибок PHP.

Исходные файлы сайта

Исходные файлы сайта с обновлениями, которые были сделаны в данной статье, можно скачать из прилагаемых дополнительных материалов:

Файлы каталога www
Таблицы базы данных MySQL

Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

Для скачивания исходных файлов необходимо авторизоваться под своим аккаунтом через соответствующую форму.

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

С уважением,

Следующая сатья: Выводим страницу ошибки 500

Если у Вас возникли вопросы, или есть какие-либо пожелания по представлению материала, либо заметили какие-нибудь ошибки, а быть может просто хотите выразить свое мнение, пожалуйста, оставьте свои комментарии. Такая обратная связь очень важна для возможности учета мнения посетителей.

Буду Вам за это очень признателен!

Источник

обновлено: 13.02.2020 1566399901

Александр Коваленко, CEO/founder агентства Advermedia.ua, опыт в SEO более 10 лет.
Канал автора в телеграм: @seomnenie

Информация о статье

Заголовок

Ошибка 404 — что означает, как создать и настроить

Описание

Все о 404 ошибке: 1. Что означает 404 2. Как создать страницу 404 3. Как найти ошибки 404 на сайте 4. Как исправить

Автор

Организация

advermedia.ua

Логотип

Loading…

CEO/founder агентства Advermedia.ua, опыт в SEO более 10 лет.
Канал автора в телеграм: @seomnenie

Новые материалы

Подписаться на телеграм канал СEO Advermedia Мнение SEO

Публикуем интересные материалы из блога и разбираем вопросы по SEO от подписчиков!

https://t.me/seomnenie
Подписаться

Источник

Сегодня хочу показать несколько примеров Страницы 404. О том, для чего данная страница нужна на блоге и как её сделать, я писала ранее. В этой статье покажу какие могут быть интересные и красивые страницы ошибки 404 и напишу их коды.

Устанавливать код будем в Настройки/Ошибки переадресации. Нажимаем — Персонализированное сообщение об ошибке 404. В открывшееся окошко вставляем код. И Сохраняем.

<main class=»bl_page404″>
<h1>ОШИБКА 404. СТРАНИЦА НЕ СУЩЕСТВУЕТ</h1>
<p>Извините! Страница, которую вы ищете, не может быть найдена. Возможно, запрошенная вами страница была перемещена или удалена. Также возможно, что вы сделали ошибку при вводе адреса. Перейдите на главную страницу.
</p>
<div class=»bl_page404__wrapper»>
<img src=»https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/404/bigBoom/cloud_warmcasino.png?raw=true» alt=»cloud_warmcasino.png»>
<div class=»bl_page404__el1″></div>
<div class=»bl_page404__el2″></div>
<div class=»bl_page404__el3″></div>
<a class=»bl_page404__link» href=»https://baryshnyam.blogspot.com/«>Главная</a>
</div>
</main>
<style>
h1 {
text-align: center;
margin-top: 1%;
margin-bottom: 25px;
font-size: 30px;
font-weight: 400;
text-transform: uppercase;
}
p {
display: block;
margin: 25px auto;
max-width: 776px;
text-align: center;
color: #660000;
font-family: «Open Sans», sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.bl_page404__wrapper {
position: relative;
width: 100%;
margin: 10px auto 10px;
max-width: 440px;
min-height: 410px;

}
.bl_page404__img {
width: 100%;
}
.bl_page404__link {
display: block;
margin: 0 auto;
width: 260px;
height: 64px;
box-shadow: 0 5px 0 #9c1007, inset 0 0 18px rgba(253, 60, 0, 0.75);
background-color: #f95801;
color: #fff;
font-family: «Open Sans», sans-serif;
font-size: 24px;
font-weight: 700;
line-height: 64px;
text-transform: uppercase;
text-decoration: none;
border-radius: 30px;
text-align: center;
}
.bl_page404__link:hover,
.bl_page404__link:focus {
background-color: #ff7400;
}
.bl_page404__el1 {
position: absolute;
top: 108px;
left: 102px;
opacity: 1;
animation: el1Move 800ms linear infinite;
width: 84px;
height: 106px;
background: url(«https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/404/bigBoom/404-1.png?raw=true»)
50% 50% no-repeat;
z-index: 2;
}
.bl_page404__el2 {
position: absolute;
top: 92px;
left: 136px;
opacity: 1;
animation: el2Move 800ms linear infinite;
width: 184px;
height: 106px;
background: url(«https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/404/bigBoom/404-2.png?raw=true»)
50% 50% no-repeat;
z-index: 2;
}
.bl_page404__el3 {
position: absolute;
top: 108px;
left: 180px;
opacity: 1;
animation: el3Move 800ms linear infinite;
width: 284px;
height: 106px;
background: url(«https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/404/bigBoom/404-3.png?raw=true»)
50% 50% no-repeat;
z-index: 2;
}
@keyframes el1Move {
0% {
top: 108px;
left: 102px;
opacity: 1;
}
100% {
top: -10px;
left: 22px;
opacity: 0;
}
}
@keyframes el2Move {
0% {
top: 92px;
left: 136px;
opacity: 1;
}
100% {
top: -10px;
left: 108px;
opacity: 0;
}
}
@keyframes el3Move {
0% {
top: 108px;
left: 180px;
opacity: 1;
}
100% {
top: 28px;
left: 276px;
opacity: 0;
}
}
</style>

Красным в коде выделила текст — меняете на свой.

Синим — ссылка на главную страницу сайта, или на ту, которую пожелаете установить. Так же меняете название кнопки Главная, если ссылка ведёт на другую страницу.

Так же можно менять шрифт, цвет текста, его размер.

Просмотреть в действии страницу можно в визуальном редакторе. Вставьте код и нажмите Показать результат.

<section class=»tv-error-404-tm» style=»background-image: url(http://home.cern/sites/home.web.cern.ch/files/image/computing_page/2013/01/tier_0_servers.jpeg); background-position:top center; background-size:cover; height:800px;»>
<div class=»tv-dark-background-tm»></div>
<div class=»container tv-error-content-tm»>
<div class=»col-md-12″>
<h1>Страница не найдена</h1>
<h3>Информация, которую вы ищете, не существует или изменилась.</h3>
<div class=»tv-error-links-tm»>
<a href=»https://baryshnyam.blogspot.com/» class=»btn»>Главная</a>
<a class=»btn» onclick=»window.history.go(-2);»>Вернуться</a>
</div>
</div>
</div>
</section>
<style>
.tv-error-404-tm {
background-color:#000;
max-height:100%;
min-height:100%;
position:relative;
padding:50px 0;
}
.tv-dark-background-tm {
position:absolute;
width:100%;
height:100%;
background:rgba(0,0,0,.6);
top:0;
left:0;
}
.tv-error-content-tm {
position:relative;
top:100px;
color:#fff;
}
.tv-error-content-tm h1 {
font-size:102px;
text-align:center;
font-weight:400;
}
.tv-error-content-tm h3 {
font-size:32px;
font-weight:300;
text-align:center;
}
.tv-error-links-tm {
width:100%;
margin-top:20%;
text-align:center;
}
.tv-error-content-tm a {
color:#fff !important;
padding:5px 30px;
border:2px solid #fff;
font-size:22px;
margin-right:30px;
border-radius:5px;
}
.tv-error-content-tm a:hover,.tv-error-content-tm a:active,.tv-error-content-tm a:visited,.tv-error-content-tm a:focus {
color:#fff !important;

}
@media (max-width: 992px) {
.tv-error-content-tm h1 {
font-size:62px;
text-align:center;
font-weight:400;
}
.tv-error-content-tm h3 {
font-size:26px;
font-weight:300;
text-align:center;
}
.tv-error-content-tm a {
color:#fff !important;
padding:5px 30px;
border:2px solid #fff;
font-size:22px;
margin-right:30px;
border-radius:5px;
}
}
@media (max-width: 425px) {
.tv-error-content-tm h1 {
font-size: 49px;
text-align: center;
font-weight: 400;
}
.tv-error-content-tm h3 {
font-size:26px;
font-weight:300;
text-align:center;
}
.tv-error-content-tm a {
color: #fff !important;
padding: 5px 30px;
border: 2px solid #fff;
font-size: 19px;
margin-right: 10px;
border-radius: 5px;
}
}
@media (max-width: 375px) {
.tv-error-content-tm h1 {
font-size: 42px;
text-align: center;
font-weight: 400;
}
.tv-error-content-tm h3 {
font-size: 22px;
font-weight: 300;
text-align: center;
}
.tv-error-content-tm a {
color: #fff !important;
padding: 5px 30px;
border: 2px solid #fff;
font-size: 18px;
margin-right: 0;
border-radius: 5px;
}
}
@media (max-width: 320px) {
.tv-error-content-tm h1 {
font-size:34px;
text-align:center;
font-weight:400;
}
.tv-error-content-tm h3 {
font-size:18px;
font-weight:300;
text-align:center;
}
.tv-error-content-tm a {
color: #fff !important;
padding: 5px 30px;
border: 2px solid #fff;
font-size: 18px;
margin-right: 0;
border-radius: 5px;
}
}
</style>

Выделенное красным в коде — текст, меняем на свой.

Синим выделила ссылку на главную страницу блога, меняем на свою.

Смотрим работу кода в визуальном редакторе.

<g id=»loupe»>
<path class=»st4″ d=»M311.4,252.6L219.8,161L208,172.8l91.6,91.6c3.4,3.4,9.1,3.2,12.2-0.5h0C314.6,260.5,314.4,255.6,311.4,252.6z
«/>
<path class=»st5″ d=»M199.5,167.1l11.1,11.1c0.6,0.6,1.5,0.6,2,0l12.5-12.5c0.6-0.6,0.6-1.5,0-2l-11.1-11.1L199.5,167.1z»/>
<polygon class=»st6» points=»215.8,154.2 217.2,155.7 205.4,173 200.2,167.8 «/>
<polygon class=»st7» points=»213,177.8 224.8,166 225.6,166.8 216.4,181.1 «/>
<path class=»st8″ d=»M164,51.9c-36,0-65.1,29.2-65.1,65.1s29.2,65.1,65.1,65.1s65.1-29.2,65.1-65.1S200,51.9,164,51.9z M164,168.7
c-28.5,0-51.7-23.1-51.7-51.7c0-28.5,23.1-51.7,51.7-51.7s51.7,23.1,51.7,51.7C215.7,145.5,192.5,168.7,164,168.7z»/>
<circle class=»st9″ cx=»164″ cy=»117″ r=»51.7″/>
<path class=»st2» d=»M129.7,82.7c-7.5,7.5-12,15.1-10,17c1.9,1.9,9.6-2.6,17-10c7.5-7.5,12-15.1,10-17
C144.8,70.7,137.2,75.2,129.7,82.7z»/>
</g>
</svg>
<style>
#error-404-img {
max-width: 700px;
display: block;
margin: 0 auto;
}

#loupe {
animation: bounceInUp 2s ease forwards;
}

#ombre-loupe {
animation: fadeIn 2s 3s ease forwards;
}

#_x34_-gauche, #_x34_-droite, #ombre-loupe, #decorations {
opacity: 0;
}

#_x34_-gauche, #_x34_-droite {
animation: fadeIn 2s ease forwards;
}

#_x34_-gauche {
animation-delay: 1s;
}

#_x34_-droite {
animation-delay: 2s;
}

#decorations {
transform-origin: center;
animation: fadeIn 2s ease forwards, rotate-grow 50s linear infinite alternate;
animation-delay: 4s;
}

@-webkit-keyframes rotate-grow {
from {
-webkit-transform: rotate(0) scale(.8);
transform: rotate(0) scale(.8);
}

to {
-webkit-transform: rotate(360deg) scale(1.5);
transform: rotate(360deg) scale(1.5);
}
}

@keyframes rotate-grow {
from {
-webkit-transform: rotate(0) scale(.8);
transform: rotate(0) scale(.8);
}

to {
-webkit-transform: rotate(360deg) scale(1.5);
transform: rotate(360deg) scale(1.5);
}
}

@-webkit-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}

to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@-webkit-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}

to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}

@keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}

to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}

@keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}

to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}

@-webkit-keyframes fadeIn {
from {
opacity: 0;
}

to {
opacity: 1;
}
}

@keyframes fadeIn {
from {
opacity: 0;
}

to {
opacity: 1;
}
}

@-webkit-keyframes bounceInUp {
from,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

from {
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0);
}

60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}

75% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}

90% {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
}

to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}

@keyframes bounceInUp {
from,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

from {
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0);
}

60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}

75% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}

90% {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
}

to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
animation-name: bounceInUp;
}
</style>

Источник

Img tag loading image 404 error solution

Решение

Решение ошибки 404 при загрузке изображений в тег img

Рекомендации по созданию страницы с ошибкой 404 Not found

Создаем каркас страницы и оформляем основное ее содержание

Ошибка 404

Поиск по сайту

Перенаправляем запросы с ошибкой на страницу 404

Исходные файлы сайта

Новые материалы

Читайте также: