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

Question

有谁知道如何在 vue 项目的公共(public)文件夹中使用带有 img 文件的 src 属性？浏览器找不到图像。

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

更新

从下面的评论来看，你好像在运行

vue serve

只有 Vue CLI project 知道 public 目录和 process.env.BASE_URL。您需要运行您的项目，而不是使用 instant prototyping vue 服务。

换句话说，运行

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`">