vue-cli3 public folder img doesn't show up

Question

Does anyone know how to use the src attribute with an img file in a vue project\'s public folder? The browser is not finding the image.

I\'m using Vue CLI 3.7.0

Answer 1

Just use <img src="/favicon.ico">.

Answer 2

Update

From the comments below, it seems you're running

vue serve

Only a Vue CLI project knows about the public directory and process.env.BASE_URL. You need to run your project instead of using the instant prototyping of vue serve.

In other words, run

npm run serve

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

---

If you have a file structure like this

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

then your code to display logo.png should look like

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

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

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

---

If you have your image in

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

then your component template code becomes

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