uniapp image 相对路径无法显示

最新推荐文章于 2024-08-10 09:15:00 发布

Cimbala

最新推荐文章于 2024-08-10 09:15:00 发布

阅读量861

点赞数

分类专栏：前端文章标签： uni-app 前端

本文链接：https://blog.csdn.net/cimbala/article/details/128900588

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

当在React应用中使用src引用图片时，如果使用相对路径可能导致图片无法显示。解决方法是在src属性内使用require()函数，例如`require(./images/trip.png)`，这样可以确保图片资源被正确加载。

摘要由CSDN通过智能技术生成

问题：
src使用相对路径，图片无法显示。
在这里插入图片描述
解决：
在src里面的内容加上require(“”)

{
	url: require("./images/trip.png"),
	text: "出行任务",
	badge: 1,
	type: "primary",
	route:"/pages/mine/leader/task"
},

加载成功
在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Cimbala

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

uni-app - H5 打包后在 CSS 里加入 url() 的图片路径不正确解决方案

王佳斌

02-05

4036

前言如果 H5 打包配置都搞对了，除了 CSS 上引入的图片其他都能正常找到，那么如下方案便可解决。打包后，在 view 视图上直接 src 加入的图片使用绝对路径能正常显示，但是在 CSS 中 url() 引入的图片却找不到路径。 // 以下两种写法都是错误 background-image: url('../static/logo.jpg') background-image: url('/static/logo.jpg') 解决方案使用 ~@ 符号，并且是绝对路径，便可解决。 backg

uniapp打包h5 - 相对路径配置

u014054437的博客

04-09

8968

uniapp打包h5 - 相对路径配置发行到h5manifest.json文件h5配置发行到h5 工具：HbuilderX 步骤1：发行 -> 网站h5手机版步骤2：填写网站标题和域名，点击发行在控制台可以很清楚地看到，项目打包的输出路径在： \ unpackage \ dist \ build \ h5中，同时，官方的说法是要部署到web服务器使用，不支持本地file协议打开...

参与评论您还未登录，请先登录后发表或查看评论

uniapp刚克隆下启动项目报相对路径问题

热门推荐

止于至善

07-27

2万+

出现场景在本地调试的时候本地图片显示,但是手机浏览的时候本地图片不显示。出现图片不显示的原因小程序只支持网络路径和base64的图片。图片转base64在线工具处理方法将图片都放到服务器，然后直接采用网络路径。 1.1 优点是能够放大量的图片。 1.2 缺点是有时开发中有大量的小图片，或者修改小图标，对于开发者来说，更换会很麻烦。将图片都转换成 ...

uniapp背景图片相对路径问题

小程序开发

08-08

704

小程序不支持在 css 中使用本地文件，包括本地的背景图和字体文件。需以 base64 方式方可使用。支持 base64 格式图片。

uni-app 学习笔记（三）uni-app中的各种引用

qq_44648936的博客

04-12

5532

一、组件引用组件的引用有三种办法 1、默认写法，即导入——注册——使用 2、vue3使用了新的语法糖，优化了步骤 3、uni-app继续优化为一步，引入easycom机制但是这种优化是有条件的，页面直接使用，需要符合components/组件名称/组件名称.vue目录结构，这样才可以直接在页面中使用举个栗子新建components目录和test组件 <template> <view class="content"> <button type="p

uniapp打包时生成的H5配置为相对路径

jia_gushuai的博客

03-17

7254

uniapp打包时生成的H5配置为相对路径配置生成相对路径修改打包后的配置文件有个遗留问题暂时解决配置生成相对路径 参考文章在mainfest.json中设置h5节点的publicPath为:’./'打包后即为相对路径 修改打包后的配置文件修改index.xxxxx.js文件的uniConfig.router={mode:"hash",base:"/"}改成uniConfig.rou...

uniapp 相对路径 image

09-28

uniapp中的相对路径image指的是在uniapp项目中，引用图片资源时使用的路径。相对路径image是相对于当前页面或组件所在的文件夹路径来解析的。通常情况下，我们可以将图片放在与当前页面或组件同级的文件夹中，然后...

uniapp

喵喵的博客

04-08

646

项目目录及文件介绍一个uni-app项目，默认包含如下目录及文件： ┌─cloudfunctions 云函数目录（阿里云为aliyun，腾讯云为tcb，uniCloud详见 https://uniapp.dcloud.io/uniCloud ） │─components 符合vue组件规范的uni-app组件目录 │ └─wqq-banner │ └─wqq-banne.vue 可复用的a组件，若目录名和.vue文件名一致，不需要import也可以直接在页面中直接使用`<wqq-bann

uniapp配置@绝对路径

07-17

uniapp配置绝对路径主要是为了引用项目中相对外部资源，例如图片、音频文件等。在uniapp中，你可以使用`require('@/assets/image.jpg')`这样的语法来指定一个绝对路径。这里的`@`前缀表示是从应用的根目录开始查找...

vue工程项目在style中设置background-image时路径问题

郭宝的博客

06-04

6545

1. 在css外设置background-image时，不能直接使用url，应该使用 <li :style="'background-image:url(require('./../assets/banner_top2.png'))'"></li> 2. 在css中设置background-image时，使用相对路径在webpack打包后出现问题，图片路径到了sta...

【uni-app】uni从入门到放弃之踩坑集合

12-21

1.使用vue-cli创建的uni-app的静态资源必须存放在static文件夹下，尝试了绝对路径，相对路径都报错，找了半个多小时才度娘出来，根据：https://ask.dcloud.net.cn/question/76738 2.vue组件数据单向流设计模式今天使用uni写组件的试试，怪自己学识短浅遇到了这个vue的注意事项，就是vue父子组件数据单向流的原则。比如说父组件传入一个value ，子组件props：{value}接收，如果要更改传过来的value这样属于违背了vue 的设计原则，如果value是基本类型vue会报错，如果value是引用类型则不会报错，因为引用类型

uni-app显示图片,加载失败时显示占位图兼容h5/app/微信小程序

weixin_45753961的博客

02-23

2483

使用image标签，@error=""写法在小程序会报错：[渲染层网络层错误] Failed to load local image resource，再加一个v-if判断 <view class="meetlist-box-item" v-for="(item,index2) in conferenceList" :key="index2" @click='reserve(item)'> <view class="img_box"> <image v-if="i

uniapp同目录的相对地址_HTML 相对路径与绝对路径

weixin_39815600的博客

11-14

3355

文件路径文件路径就是文件在电脑(服务器)中的位置，表示文件路径的方式有两种：相对路径和绝对路径。路径标识：标识符号说明/路径标识.当前目录..上一层目录“.”和“..”常与“/”结合使用表示各个路径层次：路径说明./当前路径，可省略/网站根目录，为绝对路径../上一层目录，可重复使用，如../../，表示上上层目录相对路径(Relative Path)相对路径就是指由这个文件所在的路径引...

uniapp的image引用本地图片不显示问题解决

weixin_48046344的博客

12-23

6745

uniapp引用本地图片踩坑

微信小程序转uniapp：4）微信image等控件的src路径不匹配。

sziitjin的博客

11-18

1105

微信小程序转uniapp后，uniapp会自动创建一个static文件夹，并把微信原来的resources文件剪切到static文件下。因此会导致原先image控件的路径无法找到对应的图片（其他资源文件同理），这时候需要手动修改一下。修改前 <image src="/resources/images/a.png"></image> 修改后 <image src="/static/resources/images/a.png"></image>

uniapp图片不显示 - 变量动态修改图片地址不生效 - 图片src路径错误

Rudon滨海渔村的博客

03-28

4507

效果图完整代码 <template> <view> <image :src="popupImgSrc1" mode="aspectFit" style="width: 100px; height: 100px;"></image> <image :src="popupImgSrc2" mode="aspectFit" style="width: 100px; height: 100px;"></image&

uni-app 图片相对路径 在小程序和h5 不一致的问题

zhongmei121的专栏

09-01

1854

今天开发的过程中遇到图片相对路径 在小程序和h5 不一致的问题：例如在小程序中../../**.png，但是在h5中是../../../**.png 当然可以条件编译，但是还有一种办法，就是用require引入图片例如：consttour=require('@/static/search-tour.png') 然后<image :src="tour"> ...