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

时间:2019-06-13 07:39:45

标签: vue.js vuejs2 vue-cli-3

Phil 解决了这个问题。非常感谢。

问题是我使用的是vue serve,我必须使用npm run serve来查看公用文件夹。

Phill's post中有更多详细信息。


公用文件夹中的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文件吗?

2 个答案:

答案 0 :(得分:0)

只需使用<img src="/favicon.ico">

答案 1 :(得分:0)

更新

从下面的评论看来,您正在跑步

vue serve

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

换句话说,运行

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