Gulp not seeing image?

K

Konstantin Vonoton2021-05-08 14:01:59

JavaScript

Konstantin Vonoton, 2021-05-08 14:01:59

I started installing gulp using the video https://www.youtube.com/watch?v=stFOy0Noahg&t=1988s where at 59 minutes the image is displayed on the HTML page
. For me, the image is not displayed and an error occurs:
Failed to load resource: the server responded with a status of 404 (Not Found)
although the picture in the #src folder in jpg format and in the dist folder in jpg and webp format is
the code from gulpfile.js: https://codepen.io/Toxic_kitten/pen/KKajeER
And this is the code from index.html which is in scss folder

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.min.css">
    <title>Gulp</title>
  </head>
  <body>
    @@include('_header.html')
    <main class="main">
       <img src="img/image.jpg" alt="">
    </main>
    <script type="text/javascript" src="js/script.min.js"></script>
  </body>
</html>

Here's what's in the browser after running gulp:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.min.css">
    <title>Gulp</title>
  </head>
  <body><script id="__bs_script__">//<![CDATA[
    document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.26.14'><\/script>".replace("HOST", location.hostname));
//]]></script>

     <header class="header">
  <h1>Шапка сайта</h1>
  <p>jhsj</p>
</header>

    <main class="main">
       <picture><source srcset="./img/image.webp" type="image/webp"><img src="./img/image.jpg" alt=""></picture>
    </main>
    <script type="text/javascript" src="js/script.min.js"></script>
  </body>
</html>

Help me please!

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

K

Konstantin Vonoton, 2021-05-19
@Toxic_kitten

you just need to name the image itself image
)

R

Roman Baukin, 2021-05-08
@acinonyx769

☝️ Who copies only .jpg to dist, try changing the format entry slightly from /*.{jpg, png, svg, gif, ico, webp} to /*.+(png|jpg|gif|ico|svg|webp)
Taken from the description below the video. This is most likely what is causing your problem.