#webpack #next.js
Вопрос:
Я пытаюсь визуализировать изображение с помощью next-optimised-images модуля. Когда я пытаюсь добавить изображения следующим образом
<img src={require(c.logo)} alt={c.title} />
Я получаю следующую ошибку
Но когда я жестко кодирую src атрибут, например
<img src={'courses' require('../../../../mnt/nfs/a@a.com/export/dasdas22dsdd3322a/logo.png')} alt={c.title} />
Это прекрасно работает.
Та же ошибка не возникает, когда я использую переменную с относительным путем к изображению в каталоге проекта, например require('../' folder '/img.png') .
Как решить эту проблему?
Комментарии:
1. Есть ли какая-либо причина, по которой путь в ошибке во время выполнения отличается от пути в вашем жестко заданном атрибуте src? С помощью чего выводится на консоль
console.dir(c.logo)?2. Я просто скопировал и вставил путь от ошибки в свой редактор. Таким образом, в любой папке есть 3 папки и произвольные разрывы кода, но когда я копирую и вставляю этот путь, он работает
Ответ №1:
Проблема решена, но решение довольно странное. Я пробовал много разных способов, таких как
<img src={require(`${c.logo}`)} alt={c.title} />
— но они не сработали.
Затем я попытался протестировать, добавив локальную переменную logo = '../folder/logo.png' и используя <img src={require(logo)} alt={c.title} /> — это потрясло меня, когда это также не удалось. Затем я безумно нажимаю ctrl z и сохраняю-это работало. Я заметил, что img это было написано следующим образом
<img src={require(`../folder/${c.logo}`)} alt={c.title} />
// c.logo was computed accordingly after copying the file to the relative path
Затем я проверил абсолютный путь /mnt/nfs/... , жестко запрограммировав путь-удивительно… Это работало.
Сумасшедшее решение
Все, что я сделал, это c.logo = c.logo.replace('/mnt/', ''); и во время рендеринга img
<img src={require(`/mnt/${c.logo}`)} alt={c.title} />
К моему великому удивлению и облегчению, это сработало отлично.