vue-cli3 公用文件夹 img 不显示

Question

有谁知道如何在 vue 项目的公共文件夹中使用 src 属性和 img 文件？浏览器没有找到图片。

我正在使用 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>

Answer 1

更新

从下面的 cmets 看来，您正在运行

vue serve

只有 Vue CLI 项目 知道public 目录和process.env.BASE_URL。您需要运行您的项目，而不是使用instant prototyping 或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">。