图片

@image

展示图片内容可以使用

1. 结构 <img>

图片 <img>

静态使用

1. 使用本地图片 - 相对路径或别名都可以

<img src="../assets/imgs/0.jpg" alt="">

<img src="@/assets/imgs/0.jpg" alt="">

2. 使用在线图片 - 应指定完整图片地址；如 pixabay、unsplash、大树小站- 在线资源等；或自己创建资源服务器

<img src="https://cdn.pixabay.com/photo/2023/04/01/21/11/tunnel-7893124_640.jpg" alt="">
<img src="https://glpla.github.io/utils/wallpaper/w0.jpg" alt="">

动态绑定使用

可以绑定在线图片 url 地址

let src = 'https://glpla.github.io/utils/coffee/coffee0.jpg'

<img :src="src" alt="">

或使用模板字符串 - ` ` 直接拼接域名和图片地址

let :src="`https://glpla.github.io/utils${src}`"

let src = '/coffee/coffee0.jpg'

不可以绑定本地图片 url 地址，Vue 会将其解析为一个字符串，而非地址

let src = '@/assets/imgs/0.jpg'

<img :src="src" alt="">

解决方案1 - 使用 public 资源

将图片放到项目的 public 目录并直接引用；可以创建相应的文件夹 imgs 存放图片

vue-cli3 默认路径为 public，所以无需添加 public；public 即代表 /

let src = '/imgs/logo.svg'

<img :src="src" alt=""/>

解决方案2 - 使用 import 语句

将图片作为资源引入再使用 - 适合单个静态资源

import src from '@/assets/logo.svg'

<img :src="src" alt=""/>

解决方案3 - 采用 vite 的静态资源处理；原生 Html 开发时，预览图片使用类似的 API实现，请参考输入类 input - 文件

为静态资源创建新的URL - 尤其适合处理多个静态资源

import.meta.url 是一个ESM的原生功能；会暴露当前模块的 URL。将它与原生的 URL 构造器组合使用，在一个 JavaScript 模块中，通过相对路径得到一个被完整解析的静态资源 URL

不可以使用别名 @ 引用路径

通常使用计算属性统一处理，便于列表渲染；具体实现，请访问列表渲染案例

也可以处理单个资源 - 使用普通的自定义方法即可，应显式的指定 return

<img :src="getImageUrl(src)" alt=""/>

let src = '../imgs/10.jpg'
const getImageUrl = (img) => {
    return new URL(img, import.meta.url).href
}

或者使用函数拼接路径 - 推荐；案例应用请查看事件 - 手动轮播

let src = '10.jpg'
const getImageUrl = (img) => {
    return new URL(`../imgs/${img}`, import.meta.url).href
}

还可以使用计算属性处理

背景图片 BackgroundImage

静态使用

1. 内联样式 style - 仅可以引用 public 中的资源

<div style="background-image: url('/imgs/bg.jpg');">hi,there</div>
<div style="background-image: url('@/assets/bg.png');">hi,there</div>// x
<div style="background-image: url(./assets/bg.jpg)">hi,there</div>// x

2. 样式 class

.bg-img {
  background-image: url('@/assets/dec0.png');
}

动态使用

为了和绑定的变量区分，使用引号包裹样式属性

模板字符串不支持小驼峰写法！！！- that depends

<div :style="{ 'backgroundImage': 'url(' + url + ')' }">hi,there</div>
<div :style="{ 'background-image': 'url(' + url + ')' }">hi,there</div>
<div :style="`background-image:url(${url})`">hi,there</div>
<div :style="`backgroundImage:url(${url})`">hi,there</div> // x

Summary & Homework

Summary

1. 静态使用

. 网站图标icon、logo类的放在 public 目录

2. 动态使用

. 引入为资源，图片可以放在 src 目录任意地方；建议在 assets 目录

. 使用在线资源

. 自建资源服务器

Homework

[] Vite 框架对图片的处理

静态渲染：分别在 public、assets 和 assets 同级目录创建 imgs 文件夹以及组件目录，并放入一张大图和一张小图，在项目中引用，最后发布，查看框架对静态资源图片的处理情况

<div>public</div>
<img src="/coffee1.jpg" alt="" />
<div>public → imgs</div>
<img src="/imgs/coffee3.jpg" alt="" />
<div>src → assets</div>
<img src="../assets/coffee0.jpg" alt="" />
<div>src → assets → imgs</div>
<img src="@/assets/imgs/coffee2.jpg" alt="" />
<div>src → components</div>
<img src="./coffee4.jpg" alt="" />
<div>src → assets（icon）</div>
<img src="@/assets/home_bar.png" alt="" />

动态渲染：使用单个数据或列表渲染，查看框架对图片的处理

本质上是从根路径引用，所以也可以从 / 开始，引入任意地方的资源；但是打包的时候，会出现问题，因为打包后没有 src 目录

<img v-for="img in imgs" :key="img.id" :src="`/src/assets/${img.src}`"/>

采用部分地址拼接服务器地址

<img v-for="img in imgs" :key="img.id" :src="`https://url/${img.src}`"/>