Поместите изображение на страницу без использования инструкции импорта

#javascript #reactjs #svg

Вопрос:

Я загружаю svg в папку img/bodygraphs с помощью сервера узлов/axios. Этот svg имеет уникальное имя — Имя пользователя Имя пользователя .svg (например, JohnSmith.svg). Затем я хотел бы отобразить его из этой папки, так как тогда мне придется использовать фрагменты этого svg на своей странице. Дело в том, что я не могу этого сделать. Когда я пытаюсь отобразить изображение с помощью <img src={`./img/bodygraphs/${this.state.firstName}${this.state.lastName}.svg`} /> , изображение не отображается. Я даже пробовал это с фиксированным именем файла, скажем <img src="http://localhost:3000/img/bodygraphs/SomenameSomefamilyname.svg" /> — все равно ничего

Но когда я импортирую его с import bodygraphsvg from './img/bodygraphs/SomenameSomefamiyname.svg'; помощью, а затем <img src={bodygraphsvg} /> он работает как шарм. Итак, как я могу поместить это изображение на страницу без использования инструкции import, поскольку имя файла меняется с каждым новым пользователем?

Комментарии:

1. Как настроен ваш сервер узлов? Вы используете экспресс? express.static с общедоступным каталогом, в котором хранятся изображения?

2. @Tore да, я использую экспресс. Я думаю, что проблема где-то в моем статическом объявлении, которое выглядит так: app.use(express.static('public')); app.use('/img/bodygraphs', express.static(__dirname '/img/bodygraphs')); app.use(express.static(__dirname '/public')); И когда я пытаюсь получить доступ к localhost:3001/img/bodygraphs, он говорит, что не может его получить

3. @Разорвал tnx за то, что указал на express.static. Я понял, что использовал неправильный статический путь. Проблема решена