uniapp + vue3 + vite + ts 使用v-bind给src属性绑定路径成功但无法显示解决方法

最新推荐文章于 2024-07-27 17:05:52 发布

是小张呀！

最新推荐文章于 2024-07-27 17:05:52 发布

阅读量480

点赞数

文章标签： uni-app 前端 javascript

本文链接：https://blog.csdn.net/qq_52099965/article/details/129322887

版权

在uniapp结合vue3、vite和ts的项目中，遇到使用v-bind绑定图片src路径失败的问题。原本尝试用require方式引入静态资源，但出现错误。解决方法是利用import动态导入，例如：`letimg=ref(newURL(@/module/service/static/order-dd.png,import.meta.url).href)`。这样可以正确获取到静态资源的路径并显示。

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

uniapp + vue3 + vite + ts 使用v-bind给src属性绑定路径成功但无法显示解决方法

直接用require 会报错
解决方案：使用 import

let img = ref(new URL('@/module/service/static/order-dd.png',import.meta.url).href)

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

是小张呀！

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
uniapp + vue3 + vite + ts 使用v-bind给src属性绑定路径成功但无法显示解决方法

uniapp + vue3 + vite + ts 使用v-bind给src属性绑定路径成功但无法显示解决方法
复制链接

扫一扫

vue3 ts setup 动态绑定 响应式数组

King Saj

08-29

1111

vue3 ts setup 动态绑定 响应式数组

uniapp中的image的src=“路径”图片不显示

m0_64207574的博客

11-13

2833

uniapp中的image的src=“路径”图片不显示

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

vue3中的:src绑定的路径问题

rzh554的博客

07-23

277

在遇到该问题我就将路径改为：@/static/seatnull.png，还是错了，还是找不到图片资源。总结：:src中使用的静态资源应该使用'/'开头。

Nuxt.js 使用v-bind语法绑定img的src不显示问题

追梦i赤子心的博客

12-06

671

Nuxt.js 使用v-bind语法绑定img的src不显示……

uniapp开发微信小程序中遇到的坑 image src属性动态绑定base64位图片不显示的问题

CLdemies的博客

05-21

5701

<view class="dataList" v-for="(item,index) in dataList" :key="item.id"> <image mode="left" :src="item.imagePng"> </view> 打印后将后台传过来的base64代码片段放到浏览器中是可以正常显示解析的，在dom树中查看确定src中写入了代码，那么原因就清楚了。 if(item.imagePng){ item.imagePng = item.imageP

[vue] img v-bind:src 图片不展示问题（坑）

jinwenshuo2007的博客

06-27

871

动态绑定img中的src属性，要使用require

Vue3 + Ts + Pinia + uni-app 学习笔记

qq_33365152的博客

09-13

492

Vue3 +Ts + Pinia + uni-app 学习笔记

vue3 + vant + ts + vuex + vite

最新发布

jzk_2016ks的博客

07-27

980

vue3 + vant + ts + vuex + vite 从零搭建起一个项目

【从入门到提桶】vue3.2 + vite + vant + pinia + ts 移动端 h5 项目实践

xxxzzzqqq_的博客

03-15

2201

预览图片旋转就讲完了。不过，扩展名里加 .vue 的话会报错，一般来说 .vue 文件编译之后会是 js，但是 .vue 里面如果包含了样式，会单独提取出来作为一个虚拟的文件，通过查询参数 type=style 来读取，这里以 babel 来转译样式文件当然报错。别急，你以为就这样完事了吗，并没有。与 Vuex 相比，Pinia 提供了一个更简单的 API，具有更少的规范，提供了 Composition-API 风格的 API，最重要的是，在与 TypeScript 一起使用时具有可靠的类型推断支持。

vue3-ts-error：vue 3 ts错误重现

02-28

确保在模板中的绑定表达式能够通过类型检查，例如 `v-bind` 和 `v-on`。 5. **接口定义**：在处理组件间的通信，如 Prop 和 Event 时，需要定义对应的接口。对于 Props，可以使用 `PropType`，对于 Event，可以在 `...

13.（vue3.x+vite）组件间通信方式之provide与inject

GIS之家家长

09-19

162

13.（vue3.x+vite）组件间通信方式之provide与inject

Vue 通过 v-bind 绑定图片src的两种方式

一名假人的博客

07-30

8133

前提声明这个问题的解决是在vue-cli3下，因为问候提到的public文件夹是3版本产生的在学习vue时，有一个需求是需要 v-for 循环图片，之后用一个图片地址数组通过（v-bind）去绑定图片的src，这个地方有一个大坑错误写法 //错误写法 <div id='app'>  <im...

uniapp 图片 image src内容为变量时不显示图片解决方法。

m0_74358570的博客

06-30

562

关于uniapp 图片（image）src内容为变量时不显示图片解决方法

uniapp图片无法显示

热门推荐

progrmmmm的博客

01-13

2万+

首先确定是在什么环境下不展示图片，确定你的标签是<img>还是<image>,确定你是网页不展示图片还是真机模拟不展示图片,请对应问题查找方法。一、引用本地文件中存储的图片 (1)真机环境 (2)网页环境二、引用localhost或者127的本地服务器图片 (1)真机环境 (2)网页环境三、引用本地服务器开启的端口的图片 (1)真机环境 (2)网页环境四、富文本...

vue3项目本地src图片渲染不显示问题

weixin_58149434的博客

11-10

1626

解决vue3+vite项目中图片不显示问题

Vue中图片的src不显示问题

weixin_38684316的博客

11-13

3763

动态渲染图片地址的时候，图片的src被当做静态资源处理了，没有进行编译，所以需要同过require引入图片。 <script> export default { data() { return { imgUrl: { src: require(...

vue3项目脚手架@不提示路径问题,以及vuex数据持久化配置

weixin_40922551的博客

05-18

1625

1.创建jsconfig.json文件，配置如下： { "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["./src/*"], } }, "exclude": ["node_modules", "dist"] } 解决@不提示路径问题 2.vuex的插件vuex-persistedstate来支持vuex的状态持久化 npm i vuex-persistedstate import { cre

vue-- vue-bind:src

Efficiency9的博客

06-04

1642

vue-bind:src=’图片路径’ <div class="cart-item-pic"> <img v-bind:src="item.productImage" alt="烟"> </div>代码中item.productImg是引用的我的json文件中的productImage属性{ "status":1, "result":{ "totalMoney":109,

vue :src 不显示的解决方案

weixin_46020146的博客

05-08

345

vue :src 不显示的解决方案

uniapp+vue3+vite+ts+uview-plus

09-19

uview-plus是一个全面兼容nvue...同时，根据引用中提到的内容，你可能还需要搭建vue3 ts vuerouter pinia elementplus ts环境模板以及进行vite打包优化。你可以使用vscode创建项目并使用uni-preset-vue模板进行初始化。