vue-cli3 公共文件夹 img 不显示 [英] vue-cli3 public folder img doesn't show up
问题描述
有谁知道如何将 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 不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
