Localhost不'；不显示img，但index.html显示

我在本地主机上遇到问题。我在我的项目中使用gulp服务器，我想显示img，但当我使用localhost时，它不会显示，但当我打开index.html文件时，它工作正常

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

---

根据您的gulp配置，将

src

中的HTML文件移动（第1部分）到

/dist/

文件夹中，然后从那里提供服务（第2部分）。因此，将index.html移动到

src

中，并将其从

img

标记中删除

将HTML移动到

dist

文件夹（第1部分）：

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

因此，您需要的是移动图像的任务或简单方法： 在

dist

中创建一个包含图像的

img

文件夹，并在index.html中更改路径，如下所示：

我建议您更改gulp配置，这样它就可以从

src

文件夹进行开发，并为构建过程创建第二个任务（包括缩小css、js和移动文件）。我刚刚添加了一个我不久前使用过的配置：

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'
  )
);

---

你能展示一下你的吞咽配置吗？第一个猜测：去掉

src/

，将index.html放入

src/

。那你为什么需要大口喝呢？我已经用我的大口喝文件编辑了我的问题。我尝试将img文件移动到index.html所在的目录中。我使用gulp编写我的项目（编译到sass，刷新站点广告第二屏）

gulp.task('html', function () {
  return gulp.src('./src/*.html')
    .pipe(gulp.dest('./dist'))
    .pipe(connect.reload());;
});

gulp.task('connect', function(cb) {
  connect.server({
    root: './dist',
    livereload: true
  });
  cb();
});

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'
  )
);