本文介绍了vue-cli3 公共文件夹 img 不显示的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

有谁知道如何将 src 属性与 vue 项目公共文件夹中的 img 文件一起使用?浏览器未找到图像.

我使用的是 Vue CLI 3.7.0

▼ 文件夹

 |+-- 源代码|+-- 公开|+-- favicon.ico+-- 标志.png+-- index.html

我尝试过类似 :src="xxx" 的方法,但没有奏效.

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

</模板><脚本>导出默认{数据:函数(){返回 {公共路径:process.env.BASE_URL};}}

解决方案

更新

从下面的评论来看,你似乎在跑步

vue serve

只有 Vue CLI 项目 知道 public 目录和 process.env.BASE_URL.你需要运行你的项目而不是使用instantvue serve 的原型.

换句话说,运行

npm run serve

参见 https://cli.vuejs.org/指南/cli-service.html#using-the-binary

如果你有这样的文件结构

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

然后你的代码显示 logo.png 应该看起来像

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

</模板><脚本>导出默认{数据 () {返回 {公共路径:process.env.BASE_URL}}}

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

如果你有你的图片

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

那么你的组件模板代码就变成了

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

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

▼ folders

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

I've tried something like :src="xxx", but that didn't work.

<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>
解决方案

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

这篇关于vue-cli3 公共文件夹 img 不显示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-12 14:34