根据uniapp官方目录结构,静态资源都放在static目录下,所以图片放在static目录下。
在这里插入图片描述
结合vue loader处理资源路径原则

如果路径是绝对路径 (例如 /images/foo.png),会原样保留。
如果路径以 . 开头,将会被看作相对的模块依赖,并按照你的本地文件系统上的目录结构进行解析。
如果路径以 ~ 开头,其后的部分将会被看作模块依赖。这意味着你可以用该特性来引用一个 Node 依赖中的资源:
如果路径以 @ 开头,也会被看作模块依赖。如果你的 webpack 配置中给 @ 配置了 alias,这就很有用了。所有 vue-cli 创建的项目都默认配置了将 @ 指向 /src。

所以template中可以这样写;

<template>
 <img src="/static/some.png"/>
</template>

如果是css中,因为uniapp的限制,规则有些不同

支持 base64 格式图片。
支持网络路径图片。
小程序不支持在 css 中使用本地文件,包括本地的背景图和字体文件。需以 base64 方式方可使用。
使用本地路径背景图片需注意:
为方便开发者,在背景图片小于 40kb 时,uni-app 编译到不支持本地背景图的平台时,会自动将其转化为 base64 格式;
图片大于等于 40kb,会有性能问题,不建议使用太大的背景图,如开发者必须使用,则需自己将其转换为 base64 格式使用,或将其挪到服务器上,从网络地址引用。
本地背景图片的引用路径推荐使用以 ~@ 开头的绝对路径。

也就是说,在css中设置背景图片,要使用 ~@开头的绝对路径,或者base64、或者网络图片地址

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐