Msy20070905 2024-07-23 20:02 采纳率: 21.2%
浏览 6
已结题

网页上照片只能显示一个照片格式的图标

from flask import Flask, render_template, url_for, flash, redirect, request
from flask_migrate import Migrate
from front.static.config import Config
from models import db, User, Photo
from forms import RegistrationForm, LoginForm, UploadForm
from flask_login import LoginManager, login_user, current_user, logout_user, login_required
from flask_uploads import configure_uploads, IMAGES, UploadSet
from flask_wtf import FlaskForm
from wtforms import FileField, IntegerField, SubmitField
from wtforms.validators import DataRequired
from werkzeug.utils import secure_filename
import os
from processing import process_photo


app = Flask(__name__)
app.config.from_object(Config)
app.config['SECRET_KEY'] = 'mysecretkey'
app.config['UPLOAD_FOLDER'] = 'static/uploads'
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///site.db'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False


db.init_app(app)
migrate = Migrate(app, db)
login_manager = LoginManager(app)
login_manager.login_view = 'login'
photos = UploadSet('photos', IMAGES)
configure_uploads(app, photos)

class UploadForm(FlaskForm):
    photo = FileField('Upload Photo', validators=[DataRequired()])
    submit = SubmitField('Upload')

class RatePhotoForm(FlaskForm):
    rating = IntegerField('Rating (1-5)', validators=[DataRequired()])
    submit = SubmitField('Submit Rating')

def home():
    return redirect(url_for('view_photos'))

# 首页界面
@login_manager.user_loader
def load_user(user_id):
    return User.query.get(int(user_id))


# 注册界面
@app.route("/register", methods=['GET', 'POST'])
def register():
    db.create_all()
    if current_user.is_authenticated:
        return redirect(url_for('index'))
    form = RegistrationForm()
    if form.validate_on_submit():
        print(form.username.data)
        user = User(username=form.username.data, password=form.password.data)
        db.session.add(user)
        db.session.commit()
        flash('Your account has been created!', 'success')
        return redirect(url_for('login'))
    return render_template('register.html', title='Register', form=form)


# 登入界面
@app.route("/login", methods=['GET', 'POST'])
def login():
    if current_user.is_authenticated:
        return redirect(url_for('index'))
    form = LoginForm()
    if form.validate_on_submit():
        user = User.query.filter_by(username=form.username.data).first()
        if user and user.password == form.password.data:
            login_user(user, remember=True)
            return redirect(url_for('index'))
        else:
            flash('Login Unsuccessful. Please check username and password', 'danger')
    return render_template('login.html', title='Login', form=form)


# 交互界面
@app.route("/logout")
def logout():
    logout_user()
    return redirect(url_for('index'))


@app.route("/", methods=['GET', 'POST'])
@login_required
def index():
    form = UploadForm()
    if form.validate_on_submit():
        filename = photos.save(form.photo.data)
        photo = Photo(image_file=filename, owner=current_user)
        db.session.add(photo)
        db.session.commit()
        flash('Photo uploaded successfully!', 'success')
    user_photos = Photo.query.filter_by(user_id=current_user.id).all()
    return render_template('index.html', title='Home', form=form, photos=user_photos)

@app.route('/upload', methods=['GET', 'POST'])
def upload():
    form = UploadForm()
    if form.validate_on_submit():
        file = form.photo.data
        filename = file.filename
        file_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
        file.save(file_path)

        # 处理照片
        processed_filename = f"processed_{filename}"
        processed_file_path = os.path.join(app.config['PROCESSED_FOLDER'], processed_filename)
        process_photo(file_path, processed_file_path)

        # 保存处理后的照片信息到数据库
        new_photo = Photo(original_filename=filename, processed_filename=processed_filename)
        db.session.add(new_photo)
        db.session.commit()

        flash('Photo uploaded and processed successfully!', 'success')
        return redirect(url_for('view_photos'))
    return render_template('upload.html', form=form)


@app.route('/view_photos')
def view_photos():
    photos = Photo.query.all()
    return render_template('view_photos.html', photos=photos)

@app.route('/rate_photo/<int:photo_id>', methods=['GET', 'POST'])
def rate_photo(photo_id):
    photo = Photo.query.get_or_404(photo_id)
    form = RatePhotoForm()
    if form.validate_on_submit():
        photo.rating = form.rating.data
        db.session.commit()
        flash('Thank you for your rating!', 'success')
        return redirect(url_for('view_photos'))
    return render_template('rate_photo.html', form=form, photo=photo)

if __name__ == '__main__':
    app.run(debug=True)

该网页在view_photo阶段,网页上照片只能显示一个照片格式的图标,该怎么解决啊

  • 写回答

4条回答 默认 最新

  • 阿里嘎多学长 2024-07-23 20:08
    关注

    以下内容由AIGC及阿里嘎多学长共同生成、有用望采纳:


    根据您提供的代码和问题描述,以下是一些可能的解决方案和排查步骤:

    1. 确保照片文件被正确上传和保存

      • 检查 UploadForm 中的 photo 字段是否使用了 DataRequired 验证器。
      • 确保 photos.save(form.photo.data) 调用在 if form.validate_on_submit(): 块内执行。
    2. 处理上传的照片并保存处理后的照片

      • 检查 process_photo 函数的实现,确保它能够接收原始文件路径和目标文件路径,并且正确处理图片。
      • 确保 processed_filenameprocessed_file_path 变量正确生成,并且 Photo 实例正确保存到数据库。
    3. 在网页上正确显示照片

      • 检查 view_photos.html 中的图片标签 <img> 是否使用了正确的路径。例如,使用 url_for('static', filename='uploads/' + photo.image_file) 来生成正确的图片URL。
    4. 解决照片格式图标显示问题

      • 检查 view_photos.html 是否使用了错误的图片路径或不正确的图片标签属性。
      • 确保没有 CSS 规则或 JavaScript 代码错误地修改了图片的显示。
    5. 确保数据库中的照片信息正确

      • 检查 Photo 模型确保包含所有必要的字段,如 original_filename, processed_filename, user_id 等。
      • 确保在上传和处理流程中,这些字段被正确赋值和保存。
    6. 优化图片显示的用户体验

      • 考虑在上传表单中添加图片预览功能,允许用户在提交前查看图片。
      • 添加加载动画或进度条,提升用户等待时的体验。
    7. 测试不同格式的照片

      • 上传不同格式的图片(如 JPG, PNG 等),检查是否所有格式都能被正确处理和显示。
    8. 检查服务器和文件权限

      • 确保服务器上的图片文件夹(如 static/uploads)具有正确的读写权限。
      • 检查服务器配置,确保没有规则阻止图片的访问。

    如果问题依然存在,您可能需要进一步调试或提供更多的错误信息。例如,您可以检查服务器日志,查看是否有错误或警告信息与图片显示相关。此外,使用浏览器的开发者工具(如 Chrome DevTools)检查网络请求和页面元素,可能会发现导致问题的具体原因。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(3条)

报告相同问题?

问题事件

  • 系统已结题 8月28日
  • 已采纳回答 8月20日
  • 创建了问题 7月23日

悬赏问题

  • ¥15 35114 SVAC视频验签的问题
  • ¥15 impedancepy
  • ¥15 在虚拟机环境下完成以下,要求截图!
  • ¥15 求往届大挑得奖作品(ppt…)
  • ¥15 如何在vue.config.js中读取到public文件夹下window.APP_CONFIG.API_BASE_URL的值
  • ¥50 浦育平台scratch图形化编程
  • ¥20 求这个的原理图 只要原理图
  • ¥15 vue2项目中,如何配置环境,可以在打完包之后修改请求的服务器地址
  • ¥20 微信的店铺小程序如何修改背景图
  • ¥15 UE5.1局部变量对蓝图不可见