本地主机不显示 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 部分）：distgulp.task('html', function () {&nbsp; return gulp.src('./src/*.html')&nbsp; &nbsp; .pipe(gulp.dest('./dist'))&nbsp; &nbsp; .pipe(connect.reload());;});dist 文件夹上的 Gulp 服务器（第 2 部分）：gulp.task('connect', function(cb) {&nbsp; connect.server({&nbsp; &nbsp; root: './dist',&nbsp; &nbsp; livereload: true&nbsp; });&nbsp; cb();});因此，您需要的要么是移动图像的任务，要么是简单的方法： 创建一个包含图像的文件夹并更改索引中的路径.html如下所示：imgdist<img src="img/logo.png" alt="Logo">我建议更改您的gulp配置，以便它从您的文件夹中用于开发并为构建过程创建第二个任务（包括缩小css，js和移动文件）。我只是添加了一个我前段时间使用的配置：srcvar 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&nbsp;// -----------------// BrowserSyncfunction browserSync(done) {&nbsp; browsersync.init({&nbsp; &nbsp; server: {&nbsp; &nbsp; &nbsp; baseDir: "./src/"&nbsp; &nbsp; },&nbsp; &nbsp; port: 3000&nbsp; });&nbsp; done();}// BrowserSync Reloadfunction browserSyncReload(done) {&nbsp; browsersync.reload();&nbsp; done();}// Watchersfunction watchFiles(){&nbsp; gulp.watch('src/scss/**/*.scss', gulp.series('sassify', browserSyncReload));&nbsp; gulp.watch('src/*.html', gulp.series(browserSyncReload));&nbsp; gulp.watch('src/js/**/*.js', gulp.series(browserSyncReload));}// Optimization Tasks&nbsp;// ------------------// Sassifygulp.task('sassify', (cb) => {&nbsp; gulp.src('src/scss/**/*.scss') // Gets all files ending with .scss in src/scss and children dirs&nbsp; &nbsp; .pipe(plumber())&nbsp; &nbsp; .pipe(sass()) // Passes it through a gulp-sass, log errors to console&nbsp; &nbsp; .pipe(gulp.dest('src/css')) // Outputs it in the css folder&nbsp; &nbsp; .pipe(browsersync.stream());&nbsp; cb();});// Optimizing CSSgulp.task('css', (done) => {&nbsp; gulp.src('src/css/*.css')&nbsp; &nbsp; .pipe(plumber())&nbsp; &nbsp; .pipe(cssnano())&nbsp; &nbsp; .pipe(gulp.dest('dist/css'));&nbsp; done();});// Optimizing JSgulp.task('js', (cb) => {&nbsp; gulp.src('src/js/*.js')&nbsp; &nbsp; .pipe(plumber())&nbsp; &nbsp; .pipe(sourcemaps.init())&nbsp; &nbsp; .pipe(babel({&nbsp; &nbsp; &nbsp; presets: ['@babel/env']&nbsp; &nbsp; }))&nbsp; &nbsp; .pipe(uglify())&nbsp; &nbsp; .pipe(sourcemaps.write('.'))&nbsp; &nbsp; .pipe(gulp.dest('dist/js'));&nbsp; &nbsp; cb();});// HTMLgulp.task('html', (cb) => {&nbsp; gulp.src('src/*.html')&nbsp; &nbsp; .pipe(gulp.dest('dist'));&nbsp; cb();});// Optimizing Images&nbsp;gulp.task('images', function(done) {&nbsp; gulp.src('src/assets/**/*.+(png|jpg|jpeg|gif|svg)')&nbsp; // Caching images that ran through imagemin&nbsp; .pipe(cache(imagemin({&nbsp; &nbsp; interlaced: true,&nbsp; })))&nbsp; .pipe(gulp.dest('dist/assets'))&nbsp; done();});// Generate Revisions...gulp.task('revision:rename', function(){&nbsp; gulp.src(["dist/**/*.css",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "dist/**/*.js"])&nbsp; .pipe(rev())&nbsp; .pipe(revdel())&nbsp; .pipe(gulp.dest('dist'))&nbsp; .pipe(rev.manifest({ path: 'manifest.json' }))&nbsp; .pipe(gulp.dest('dist'))});// update referencesgulp.task('revision:updateReferences', function(){&nbsp; &nbsp;gulp.src(['dist/manifest.json','dist/**/*.{html,json,css,js}'])&nbsp; &nbsp;.pipe(collect())&nbsp; &nbsp;.pipe(gulp.dest('dist'))});// Cleaning&nbsp;gulp.task('clean', function() {&nbsp; return del.sync('dist').then(function(cb) {&nbsp; &nbsp; return cache.clearAll(cb);&nbsp; });})gulp.task('clean:dist', (cb) => {&nbsp; del.sync(['dist/**/*', '!dist/assets', '!dist/assets/**/*']);&nbsp; cb();});// Build Sequences// ---------------gulp.task('default',&nbsp; gulp.series(&nbsp; &nbsp; 'sassify',&nbsp; &nbsp; gulp.parallel(&nbsp; &nbsp; &nbsp; watchFiles,&nbsp; &nbsp; &nbsp; browserSync&nbsp; &nbsp; )&nbsp;&nbsp; ));gulp.task('build',&nbsp; gulp.series(&nbsp; &nbsp; 'clean:dist',&nbsp; &nbsp; 'sassify',&nbsp; &nbsp; gulp.parallel(&nbsp; &nbsp; &nbsp; 'css',&nbsp; &nbsp; &nbsp; 'js',&nbsp; &nbsp; &nbsp; 'images'&nbsp; &nbsp; ),&nbsp; &nbsp; 'html'&nbsp; ));