本地主机不显示 img，但索引.html

Question

我在本地主机有问题。我为我的项目使用 gulp 服务器，我想显示 img，但是当我使用 localhost 时它不显示，但是当我打开我的索引.html文件时它工作正常<img src="src/img/logo.png" alt="Logo">我找不到一个好的 src 来显示它。它应该是什么样子的？编辑：我的古尔普文件是：const gulp = require("gulp");const sass = require("gulp-sass");const sourcemaps = require('gulp-sourcemaps');var connect = require('gulp-connect');gulp.task('connect', function(cb) {  connect.server({    root: './dist',    livereload: true  });  cb();});gulp.task("sass", function() {  return gulp.src('./src/scss/main.scss')          .pipe(sourcemaps.init())          .pipe(sass({errLogToConsole: true}))          .pipe(sourcemaps.write())          .pipe(gulp.dest('./dist/css'))          .pipe(connect.reload());});gulp.task('html', function () {  return gulp.src('./src/*.html')    .pipe(gulp.dest('./dist'))    .pipe(connect.reload());;});gulp.task('watch', function () {  gulp.watch('./src/scss/**/*.scss', gulp.series('sass'));    gulp.watch('./src/**/*.html', gulp.series('html'));  });gulp.task('default', gulp.series('connect', 'watch'));

Answer 1

根据您的 gulp 配置，您的 HTML 文件被移动到您的文件夹中（第 1 部分），然后从那里提供（第 2 部分）。因此，将您的索引.html移入并将其从标签中删除。src./dist/srcimg

将 HTML 移动到文件夹（第 1 部分）：dist

gulp.task('html', function () {

  return gulp.src('./src/*.html')

    .pipe(gulp.dest('./dist'))

    .pipe(connect.reload());;

});

dist 文件夹上的 Gulp 服务器（第 2 部分）：

gulp.task('connect', function(cb) {

  connect.server({

    root: './dist',

    livereload: true

  });

  cb();

});

因此，您需要的要么是移动图像的任务，要么是简单的方法： 创建一个包含图像的文件夹并更改索引中的路径.html如下所示：imgdist

<img src="img/logo.png" alt="Logo">

我建议更改您的gulp配置，以便它从您的文件夹中用于开发并为构建过程创建第二个任务（包括缩小css，js和移动文件）。我只是添加了一个我前段时间使用的配置：src

var gulp = require('gulp');

var sass = require('gulp-sass');

var browsersync = require("browser-sync").create();

var babel = require('gulp-babel');

var sourcemaps = require('gulp-sourcemaps');

var concat = require('gulp-concat');

var uglify = require('gulp-uglify');

var plumber = require('gulp-plumber');

var cssnano = require('gulp-cssnano');

var imagemin = require('gulp-imagemin');

var cache = require('gulp-cache');

var del = require('del');

var rev = require('gulp-rev');

var revdel = require('rev-del');

var collect = require('gulp-rev-collector');

// Development Tasks 

// -----------------

// BrowserSync

function browserSync(done) {

  browsersync.init({

    server: {

      baseDir: "./src/"

    },

    port: 3000

  });

  done();

}

// BrowserSync Reload

function browserSyncReload(done) {

  browsersync.reload();

  done();

}

// Watchers

function watchFiles(){

  gulp.watch('src/scss/**/*.scss', gulp.series('sassify', browserSyncReload));

  gulp.watch('src/*.html', gulp.series(browserSyncReload));

  gulp.watch('src/js/**/*.js', gulp.series(browserSyncReload));

}

// Optimization Tasks 

// ------------------

// Sassify

gulp.task('sassify', (cb) => {

  gulp.src('src/scss/**/*.scss') // Gets all files ending with .scss in src/scss and children dirs

    .pipe(plumber())

    .pipe(sass()) // Passes it through a gulp-sass, log errors to console

    .pipe(gulp.dest('src/css')) // Outputs it in the css folder

    .pipe(browsersync.stream());

  cb();

});

// Optimizing CSS

gulp.task('css', (done) => {

  gulp.src('src/css/*.css')

    .pipe(plumber())

    .pipe(cssnano())

    .pipe(gulp.dest('dist/css'));

  done();

});

// Optimizing JS

gulp.task('js', (cb) => {

  gulp.src('src/js/*.js')

    .pipe(plumber())

    .pipe(sourcemaps.init())

    .pipe(babel({

      presets: ['@babel/env']

    }))

    .pipe(uglify())

    .pipe(sourcemaps.write('.'))

    .pipe(gulp.dest('dist/js'));

    cb();

});

// HTML

gulp.task('html', (cb) => {

  gulp.src('src/*.html')

    .pipe(gulp.dest('dist'));

  cb();

});

// Optimizing Images 

gulp.task('images', function(done) {

  gulp.src('src/assets/**/*.+(png|jpg|jpeg|gif|svg)')

  // Caching images that ran through imagemin

  .pipe(cache(imagemin({

    interlaced: true,

  })))

  .pipe(gulp.dest('dist/assets'))

  done();

});

// Generate Revisions...

gulp.task('revision:rename', function(){

  gulp.src(["dist/**/*.css",

            "dist/**/*.js"])

  .pipe(rev())

  .pipe(revdel())

  .pipe(gulp.dest('dist'))

  .pipe(rev.manifest({ path: 'manifest.json' }))

  .pipe(gulp.dest('dist'))

});

// update references

gulp.task('revision:updateReferences', function(){

   gulp.src(['dist/manifest.json','dist/**/*.{html,json,css,js}'])

   .pipe(collect())

   .pipe(gulp.dest('dist'))

});

// Cleaning 

gulp.task('clean', function() {

  return del.sync('dist').then(function(cb) {

    return cache.clearAll(cb);

  });

})

gulp.task('clean:dist', (cb) => {

  del.sync(['dist/**/*', '!dist/assets', '!dist/assets/**/*']);

  cb();

});

// Build Sequences

// ---------------

gulp.task('default',

  gulp.series(

    'sassify',

    gulp.parallel(

      watchFiles,

      browserSync

    ) 

  )

);

gulp.task('build',

  gulp.series(

    'clean:dist',

    'sassify',

    gulp.parallel(

      'css',

      'js',

      'images'

    ),

    'html'

  )

);