Question

我需要在具有特定ID的数据库中的表中显示多个图像，但会显示损坏的图像like this

module.exports = function (grunt) {

    require('load-grunt-tasks')(grunt);

    var compass = require('compass-importer');

    grunt.initConfig({

        pkg: grunt.file.readJSON('package.json'),

        /**
         *
         * Project Settings
         *
         */
        project: {
            name: 'corral',
            url: 'http://localhost:8888/Corral-Site/',
            sass: ['../lib/scss'],
            css: ['../lib/css'],
            images: ['../lib/images'],
            js: ['../lib/js'],
            fonts: ['../lib/fonts'],
            tmp: ['.tmp']
        },

        // Look for CSS files, and JS files and concatenate into single files
        bower_concat: {
            all: {
                dest: {
                  js: '.tmp/js/bower.js',
                  css: '.tmp/css/bower.css'
                },
                bowerOptions: {
                    relative: false
                },
                mainFiles: {
                    'jquery' : ['dist/jquery.min.js']
                }
            }
        },

        // Look for all SCSS files and compile into import maps
        sass_globbing: {
            project: {
                files: {
                    '<%= project.sass %>/_bin_importMap.scss': '<%= project.sass %>/bin/**/*.scss',
                    '<%= project.sass %>/_atoms_importMap.scss': '<%= project.sass %>/atoms/**/*.scss',
                    '<%= project.sass %>/_molecules_importMap.scss': '<%= project.sass %>/molecules/**/*.scss',
                    '<%= project.sass %>/_organisms_importMap.scss': '<%= project.sass %>/organisms/**/*.scss'
                },
                options: {
                    useSingleQuotes: false
                }
            }
        },

        // Compass: Compile SCSS files into CSS
        sass: {
            options: {
                includePaths: [
                    '.compass',
                    'bower_components/susy/sass'
                ],
                importer: compass,
                sourceComments: true,
                noCache: 'true'
            },
            dist: {
                files: {
                    '<%= project.css %>/theme.css': '<%= project.sass %>/theme.scss'
                }
            }
        },

        // Concatenate the CSS and JS files
        concat: {
            js: {
                src: [
                    '<%= project.tmp %>/js/bower.js',
                    '<%= project.js %>/active/**/*.js',
                    '!<%= project.js %>/<%= project.name %>.js',
                    '!<%= project.js %>/<%= project.name %>.min.js',
                ],
                dest: '<%= project.js %>/<%= project.name %>.js'
            },
            css: {
                src: [
                    '<%= project.css %>/*.css',
                    '<%= project.tmp %>/css/bower.css',
                    '!<%= project.css %>/editor.css',
                    '!<%= project.css %>/<%= project.name %>.css',
                    '!<%= project.css %>/<%= project.name %>.min.css',
                ],
                dest: '<%= project.css %>/<%= project.name %>.css'
            }
        },

        // Minify CSS files
        cssmin: {
            minify: {
                expand: true,
                cwd: '<%= project.css %>/',
                src: [
                    '<%= project.name %>.css'
                ],
                dest: '<%= project.css %>/',
                ext: '.min.css'
            }
        },

        // Minify JS files
        uglify: {
            js: {
                files: {
                    '<%= project.js %>/<%= project.name %>.min.js': '<%= project.js %>/<%= project.name %>.js'
                }
            }
        },

        // Create spritesheet
        sprite: {
            all: {
                src: [
                    '<%= project.images %>/sprite-src/*.png',
                ],
                retinaSrcFilter: ['<%= project.images %>/sprite-src/*@2x.png'],
                retinaDest: 'spritesheet-2x.png',
                dest: '<%= project.images %>/spritesheet.png',
                destCss: '<%= project.sass %>/bin/_sprites.scss',
                imgPath: '../images/spritesheet.png'
            }
        },

        // Watch for changes
        watch: {
            options: {
                livereload: true,
                nobeep: true,
                interval: 5007
            },
            //dont: {
            //
            //    files: ['**/node_modules/**/*',
            //            '**/bower_components/**/*']
            //
            //},
            config: {
                files: [
                    'Gruntfile.js'
                ]
            },
            js: {
                files: [
                    '<%= project.js %>/**/*.js',
                    '<%= project.tmp %>/js/bower.js',
                    '!<%= project.js %>/bin/inactive/**/*.js',
                    '!<%= project.js %>/<%= project.name %>.js',
                    '!<%= project.js %>/<%= project.name %>.min.js'
                ],
                tasks: [
                    'concat:js',
                    'uglify'
                ]
            },
            php: {
                files: [
                    '../../**/*.php'
                ]
            },
            bower: {
                files: [
                    'bower_components/**/*.css',
                    'bower_components/**/*.js'
                ],
                tasks: [
                    'bower_concat'
                ]
            },
            css: {
                files: [
                    '<%= project.css %>/**/*.css',
                    '!<%= project.css %>/theme.css',
                    '!<%= project.css %>/<%= project.name %>.css',
                    '!<%= project.css %>/<%= project.name %>.min.css'
                ],
                tasks: [
                    'concat:css',
                    'cssmin'
                    //'clean:css'
                ]
            },
            image: {
                files: [
                    '<%= project.images %>/**/*.png',
                    '!<%= project.images %>/spritesheet.png'
                ],
                tasks: [
                    'sprite:all'
                ]
            },
            sass: {
                files: [
                    '<%= project.sass %>/**/*.scss',
                    '../fct/scss/*.scss',
                    '!<%= project.sass %>/*importMap.scss'
                ],
                tasks: [
                    //'sass_globbing',
                    'sass',
                    'concat:css',
                    'cssmin'
                ]
            }
        }
    });

    // Grunt Launch task
    grunt.registerTask('launch', [
        'bower_concat',
        'sass_globbing',
        'sass',
        'concat:css',
        'cssmin',
        'concat:js',
        'uglify',
        'sprite:all',
        'watch'
    ]);

    grunt.registerTask('compile', [
        'bower_concat',
        'sass_globbing',
        'sass',
        'concat:css',
        'cssmin',
        'concat:js',
        'uglify',
        'sprite:all'
    ]);

};

Answer 1

您需要正确的图片路径

echo '<img src="http://localhost/display-all-images.php/'.$image.'" width="360" height="150">';

在您的代码中，您在php文件中找不到文件夹中的图像如果您的$image变量与imagename.jpg类似，并且它存储在图像文件夹

中

您的语法应为

echo '<img src="http://localhost/yourprojectname/images/'.$image.'" width="360" height="150">';

使用PHP显示多个图像

1 个答案: