Загрузка статических активов с помощью vue-cli 3.x - PullRequest
Новая
       17

Загрузка статических активов с помощью vue-cli 3.x

0 голосов
/ 12 октября 2019

У меня есть настройка проекта vue-cli 3 со следующей структурой каталогов:

enter image description here

Все статические активы загружаются в publicкаталог и успешно скомпилированы и собраны на localhost .

Как видно из изображения ниже, guyana-live-logo.png , slide-1.jpg и 970x250-ad.png все успешно загружены, однако в браузере отображается только логотип и рекламное изображение.

enter image description here

Что я пробовал

  1. Изменение способа ссылки на изображение.

Оригинал - работает почти для всех других изображений 

<img src="/img/slide-1.jpg"/>

Тест 0 - это загрузило изображение с добавленным хешем (slide-1.1b0ahsa.jpg), но оно все равно не появилось в браузере 

<img src="../../../public/img/slides/slide-1.jpg">

Тест 1 -используя v-bind 

<img :src="'/img/slide-1.jpg'"/>

Перемещение изображения внутри каталога src и подкаталога компонента , оба из которых оказались бесполезными.

Обновление vue-loader

Здание для производства и обслуживания только папки / dist

Ключевые примечания

  • Консоль или мое программное обеспечение для отслеживания ошибок не выдают ошибок.
  • Формат изображения, кажется, не является проблемой, некоторые .png загружаются, а другие нет, то же самое верно для .jpg.
  • Это влияет на некоторые файлы JavaScript. Файлы JS вызываются так: <script type="text/javascript" src="<%= BASE_URL %>js/script.js"></script> в public / index.html

1 Ответ

1 голос
/ 13 октября 2019

Изображения должны находиться в том же каталоге или дочернем каталоге файла, в котором вы пытаетесь получить к ним доступ (т.е. в каталоге Components).

Можете ли вы попробовать получить доступ к изображению через его URL <img src="http://localhost:8080/img/guyana-live-logo.png" />?

Это должно работать, но вы, возможно, не захотите использовать его таким образом.

Другая возможность, которую вы можете использовать, это: 

<script>
import image from './img/slide-1.jpg'
...

Затем в Vue data: 

  data() {
    return {
      img: image,
    };

  },

Затем в вашем HTML: 

<img :src="image"/>

Это решает проблемы при попытке доступа к изображениям при сборке с помощью Parcel Bundler

...