图片

@image

静态使用

1. 使用本地图片

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

3. 自己创建资源服务器

动态绑定使用

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

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

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

解决方案1

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

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

let src = '/imgs/10.jpg'

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

解决方案2

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

import src from '../imgs/10.jpg'

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

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

为静态资源创建新的URL - 尤其适合处理多个静态资源，如列表渲染

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

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

拼接路径；案例应用请查看事件 - 手动轮播

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

[] Vite 框架对图片的处理

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

<div>public</div>
<img src="/imgs/banner.png" alt=""/>
<div>assets</div>
<img src="./assets/imgs/banner.png" alt=""/>
<div>src -> imgs</div>
<img src="./imgs/banner.png" alt=""/>

<img src="../imgs/10.jpg" alt=""/>

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

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

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