Изображение Webpack и React не найдено

Question

Я смотрел на , поэтому много разные ресурсы ( некоторые не связан , а этот наиболее близок к моей проблеме). Кажется, никто из них не решил мою проблему.

Я новичок как в React, так и в Webpack. Я нашел этот урок и последовал за ним, чтобы создать базовый сайт.

Однако у меня проблемы с отображением изображений. Вместо отображения изображения я получаю изображение «испорченного файла», и консоль говорит GET http://127.0.0.1:5000/public/images/smiley.png 404 (NOT FOUND)

Я установил загрузчик изображений Webpack и использую require в своем коде React. Похоже, что веб-пакет находит изображение, потому что, если я изменяю имя изображения, я получаю ошибку, такую ​​как Uncaught Error: Cannot find module '../images/smiley.png', которая вылетает на весь сайт вместо ошибки 404.

Это моя структура папок:

Когда я запускаю проект с npm run watch и python server.py (из папки static и server соответственно), папка public с smiley.png внутри нее появляется внутри папки dist .

У меня есть догадка, что проблема в том, что мой Flask настроен таким образом, что он не отвечает на запрос, поскольку считает, что папка public запрещена. Но это всего лишь догадка, и я не знаю, как это исправить, если это так.

Мой код можно найти здесь . Любая помощь будет оценена.

EDIT:

Следуя моей догадке, я добавил следующее в свой server.py:

@app.route("/public/<path:path>")
def get_public_file(path):
    print("getting something from public: {}".format(path))
    return send_from_directory("public", path)

Но это тоже не сработало - я все еще получаю 404.

РЕДАКТИРОВАТЬ 2:

Благодаря @Joost мы обнаружили, что при использовании app = Flask(__name__, static_folder="../static", template_folder="../static") изображение корректно устанавливается на http://127.0.0.1:5000/static/images/smiley.png.

Однако это приводит к тому, что Flask не может определить, где находится bundle.js, поскольку он находится внутри папки dist.

Добавление в

@app.route("/dist/<path:path>")
def get_dist_file(path):
    print("getting something from dist: {}".format(path)) # this ran
    return send_from_directory("dist", path)

до server.py не помогло - я все равно получаю GET http://127.0.0.1:5000/dist/bundle.js net::ERR_ABORTED 404 (NOT FOUND) в инспекторе.

Так что теперь уловка состоит в том, чтобы выяснить, как сохранить улыбающееся лицо, и заставить колбу также подать файл bundle.js.

РЕДАКТИРОВАТЬ 3:

Я только что обнаружил очень схематичный способ заставить его работать, настолько схематичный, что я даже не собираюсь публиковать его как ответ, потому что хочу что-то менее схематичное.

Использование @ Joost's app = Flask(__name__, static_folder="../static", template_folder="../static") и добавление следующего к server.py сработало.

@app.route('/<path:path>')
def static_file(path):
    print("getting static file {}".format(path))
    if path.startswith("public/"):
        path = "dist/" + path
        print("in public folder; path changed to: {}".format(path))
    return app.send_static_file(path)

Проблема с этим решением заключается в том, что мне действительно не следует использовать send_static_file, поскольку он крайне небезопасен, а в том числе такое выражение if, как кажется, подвержено множеству ошибок. Было бы желательно другое решение.

Answer 1

Я продолжал смотреть, откуда запускалось приложение, извините за это.

На сегодняшний день самым простым решением является установка статической папки в другую папку:

app = Flask(__name__, static_folder='../static')

Я только что попробовал, и это должно работать без проблем.

Вы можете найти свой файл здесь:

http://127.0.0.1:5000/static/images/smiley.png

Ваш файл пакета будет здесь:

http://127.0.0.1:5000/static/dist/bundle.js

Вы получаете ошибку шаблона, потому что у вас нет папки с шаблоном, которая обычно называется tempates. Поэтому создайте подпапку с именем templates в папке server. Затем не указывайте аргумент template_folder в строке app = Flask(..), но сохраняйте его app = Flask(__name__, static_folder='../static').

Если по какой-то причине вы хотите отделить свою статическую информацию от публичных файлов и также иметь маршрут /public, вы можете попробовать следующий подход:

@app.route("/public/<path:path>")
def get_public_file(path):
    full_path = os.path.join('../static/dist/public/', path)
    head, tail = os.path.split(full_path)
    return send_from_directory(head, tail)

Затем вы можете получить доступ к смайлику в fullstack_template/static/dist/public/images/smiley.png, перейдя к http://127.0.0.1:5000/public/images/smiley.png.