Как указать расположение внешнего хранилища изображений в VueJS 2?

Question

Обычно изображения в vue находятся в

 <project-root>/src/assets

Но мне нужно указать внешнее местоположение для хранилища изображений, например:

/Users/tom/imageStore

Так что теперь

<img src="images/one.jpg">

отображается на

/Users/tom/imageStore/images/one.jpg

Это позволит приложению production vue (запущенному из папки dist) быть независимым от хранилища изображений. Я могу хранить новые изображения во внешнем хранилище, не создавая приложения для производственной сборки каждый раз, когда в imageStore сохраняется новый контент.

Answer 1

Простое решение - bd, использующее прокси-сервер devserver для маршрутизации images с проксированием к локальному каталогу, обслуживаемому через простой сервер, такой как serve .

Как только ваше приложение запросит изображение, оно будет отправлено из папки, отличной от public.

Для производства вы можете использовать location Блоки из nginx, чтобы обслуживать изображения из другой папки, чем остальная часть вашего приложения. Или вы можете настроить nginx для обслуживания из корзины Amazon s3. Как хочешь.

Answer 2

Помните, что для того, чтобы на вашем сайте отображались какие-либо изображения, ваши изображения должны оказаться в рабочей сборке. То есть при npm run build изображения копируются в папку dist. Это означает, что веб-пакет, в частности, должен знать, как найти изображения. В общем, я не рекомендую хранить ваши изображения вне вашего проекта. Зачем? Потому что это мешает программному обеспечению контроля версий. Изображения являются неотъемлемой частью вашего проекта, и без них ваше приложение выглядит как сломанное.

Если по какой-то причине вы по-прежнему хотите подойти к ним по другому пути, чем тот, который вы пишете в своих файлах Vue, я думаю, вы можете использовать символическую ссылку. Симлинки синонимизируют два пути. Если вы используете символическую ссылку <projectRoot>/images на /Users/tom/imageStore/images, она сможет найти ваши изображения там. Символьные ссылки, подобные этим, могут также привести к уязвимости безопасности, если они используются безответственно.

Если ваши изображения находятся в вашем проекте, но вы хотите подойти к ним по другому пути, вы можете создать псевдоним в конфигурации вашего веб-пакета. Псевдоним веб-пакета разрешит пути с определенным именем в другой каталог. Это работает так же хорошо для импорта в скриптах.