Как плавно ссылаться на изображения в каталоге publi c в Vue? - PullRequest
Новая
       12

Как плавно ссылаться на изображения в каталоге publi c в Vue?

0 голосов
/ 21 апреля 2020

Я использую Laravel Mix, и все мои активы находятся в каталоге publi c. Вот как я сейчас ссылаюсь на изображение в файле resource / js / components / Layout / Layout. vue: 

<img src="../../../public/images/Logo.png" alt="Logo">

Как видите, это громоздкая запись "../../" все время. Есть ли способ немедленно обратиться к каталогу /public? Я не могу просто использовать /images/Logo.png из-за того, что ресурсы загружаются в облачный провайдер в производственной среде.

Я видел, как люди используют <img src="@/assets/logo.png">, но @ ссылается на каталог /resources. Должен ли я как-то создать свой собственный псевдоним?

Как плавно ссылаться на изображения в каталоге publi c в Vue?

1 Ответ

1 голос
/ 21 апреля 2020

Вам необходимо расширить конфигурацию веб-пакета : 

const path = require('path');

mix.webpackConfig({
  resolve: {
    alias: {
      '~': path.resolve('path/to/public')  // <-- path to your "public" folder
    }
  }
});

Затем вы можете ссылаться на ваше изображение с помощью: 

<img src="~/images/Logo.png" alt="Logo" />

Примечание

Вы можете изменить ~ на что-либо еще в псевдоним веб-пакета .

path - это nodejs встроенный модуль .

...