Общая папка vue-cli3 img не отображается

Question

Этот вопрос решается Филом .Большое спасибо.

Проблема в том, что я использовал vue serve, мне нужно использовать npm run serve, чтобы увидеть общую папку.

Подробнее в Пост Фила .

---

img Источник в общей папке не отображается в Vue.js.

Я использую Vue CLI 3.7.0

▼ папки

 |
 +-- src
 |    
 +-- public
       |  
       +-- favicon.ico
       +-- logo.png
       +-- index.html

Я пробовал несколько шаблонов: src = "xxx", как этот, но не работал.

<template>
    <div>
        <img :src="'/favicon.ico'">
        <img :src="`${publicPath}favicon.ico`">
     </div>
</template>

<script>
    export default {
        data: function() {
            return {
                publicPath: process.env.BASE_URL
            };
        }
    }
</script>

Кто-нибудь знает, как отобразить файл img в общей папке?

Answer 1

Обновление

Из комментариев ниже кажется, что вы работаете

vue serve

Только Vue CLI проект знает о каталоге public и process.env.BASE_URL.Вам необходимо запустить проект вместо использования мгновенного прототипирования из vue serve.

Другими словами, выполните

npm run serve

См.https://cli.vuejs.org/guide/cli-service.html#using-the-binary

---

Если у вас такая файловая структура

├── public
│   ├── favicon.html
│   ├── index.html
│   ├── logo.png

, тогда ваш код для отображения logo.png должен выглядеть как

<template>
  <div>
    <img :src="`${publicPath}logo.png`">
  </div>
</template>

<script>
export default {
  data () {
    return {
      publicPath: process.env.BASE_URL
    }
  }
}
</script>

См.https://cli.vuejs.org/guide/html-and-static-assets.html#the-public-folder

---

Если у вас есть изображение в

├── public
│   ├── img
│   │   ├── logo.png

, тогда код шаблона компонента становится

<img :src="`${publicPath}img/logo.png`">

Answer 2

Просто используйте <img src="/favicon.ico">.