vite+vue3，img动态传递src

于 2024-07-23 09:30:27 发布
阅读量348 收藏 9
点赞数 5
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Just_Maybe/article/details/140626379
版权

当前vite版本5.2.6，希望下个版本可以解决模版变量的编译问题。

src = new URL(`../assets/home/platform/${ v.icon }.png`, import.meta.url).href;

 遇到问题的小伙伴可以试一下，分别打印import.meta.ur，和new URL的传参，相关链接我就不挂了，可以解决问题。

自先沉稳UP
关注
  • 5
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3 + Vite 动态引入图片
qq_43806604的博客
11-01 8360
Vue3 + Vite 动态引入图片 开发vue3 + vite项目的时候 想要动态的去引入图片来显示，尝试过require 发现报错 require is not defind 查看vite官方网站 官方说明 import imgUrl from './img.png' document.getElementById('hero-img').src = imgUrl 行为类似于 Webpack 的 file-loader。区别在于导入既可以使用绝对公共路径（基于开发期间的项目根路径），也可
VUE3语法--img图片不显示/img的src动态赋值图片显示
热门推荐
雾林小妖的博客
11-27 1万+
在VUE中，img中的src动态赋值的之后，无法显示图片出现404.以及VUE中通过require访问静态资源出现的Uncaught Error: cannot module ‘asstes/logo.png’问题。
vite项目中处理各种静态资源的引入方式介绍
jieyucx的博客
06-27 5933
在vite创建的vue3项目中，引用图片资源有以下
vue3+vite 在v-for中对img的:src属性动态赋值，打包后图片不显示的问题
weixin_45825274的博客
03-06 1470
vue+vite，当需要把静态资源图片路径动态赋值img的:src属性时，打包后图片加载不出来的问题
vue2.0中动态绑定img的src属性的方法（三元运算）
最新发布
simpleMan8023的博客
07-08 620
函数在构建时会解析图片路径，并将图片打包到正确的位置。使用 require 可以确保路径在打包时正确解析。可以用于在运行时加载资源，但这种方法通常用于更复杂的场景，如按需加载模块。在标签里进行三元运算符判断的时候，引用地址外层需要加require()使用computed属性来动态计算img的src路径。/* 你的样式 */
vite中img标签动态src无法正常显示
qq_21948601的博客
04-13 1759
使用import.meta.url 是一个 ESM 的原生功能，会暴露当前模块的 URL。将它与原生的 URL 构造器 组合使用，在一个 JavaScript 模块中，通过相对路径我们就能得到一个被完整解析的静态资源。原因是因为动态地址，路径被加载器解析为字符串，所以图片找不到。图片存放的地址不同，concatPath中拼接的url也不同。1.用相对路径的写法在<img>标签上是可以显示的。（1）import每张图片，使用的时候直接拿去用。2.但是会用动态传值之后，图片显示不了。
vue3项目使用＜img :src=““ /＞动态加载图片
weixin_68443051的博客
04-19 1061
接着我试着使用require(`../assets/images/AI.png`)来解决，但是控制台看到报错了：SyntaxError: The requested module '/node_modules/.vite/deps/vue.js?下面是部分页面代码，这里我使用了<img :src="itemc.headUrl" />来动态加载图片。这时遇到了问题，因为这里的itemc.headUrl是。：../assets/images/AI.png，页面。所以该方法无法解决我的问题。
img图片的src分别在vue2、vue3项目中如何动态赋值？
qq_41238459的博客
12-21 3485
浅谈img图片src在vue2、vue3项目中动态赋值问题
Vue3 动态渲染 img 的 :src
博客
08-08 1862
Vue3 动态渲染img标签的:src
vue3+vite 项目 img src字符串拼接 动态src
weixin_44166849的博客
12-13 1245
vue3+vite 项目 img src字符串拼接 动态src
vite+vue3动态模块化导入并使用pinia
03-25
在"vite+vue3动态模块化导入并使用pinia"的项目中，我们可以通过以下步骤实现动态模块化导入和使用Pinia： 1. **配置Vite**：在`vite.config.js`中，我们需要配置Vue3和Pinia的插件，如`@vitejs/plugin-vue`和`vite...
Vue.js 动态为img的src赋值方法
11-28
需求是这样： ajax获取数据如下 { "code": "200", "data": { "SumAmount": 200, "List": [{ "amount": 100, "sex": "male", "fee": 1, "id": 98, "status": 2, "time": "2015-08-11" }, { "amount": 100, "sex": "female", "fee": 0, "id": 8, "status": 2, "time": "2015-06-12" }] }
vite+vue3使用模块化批量发布Mockjs接口
03-29
"vite+vue3使用模块化批量发布Mockjs接口"这个主题涵盖了如何在Vite搭建的环境中，结合Vue3和Mockjs来实现接口的模块化和批量处理。这将帮助开发者在实际API未准备好或者不便于调试时，快速模拟后端数据，提高开发...
vue3+vite+qiankun+monorepo框架
08-03
vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+...
electron+vite+vue3+sqlite3基础框架
12-14
总结起来，"electron+vite+vue3+sqlite3基础框架"是一个为开发桌面应用提供便利的工具集合，它结合了现代前端的最佳实践，为开发者创造了一个高效、易用的开发环境。无论是对于新手还是经验丰富的开发者，这个框架都...
基于vite+vue3+pinia+element-plus+ts后台管理系统
04-08
【标题】"基于vite+vue3+pinia+element-plus+ts后台管理系统"是一个现代的前端开发框架，用于构建高效、可扩展的企业级后台管理界面。这个项目整合了多种前沿的技术，旨在提供一个功能全面、性能优异的解决方案，...
vue2 和vue3动态绑定src
柑橘乌云_
03-25 2563
创建的vue2可以通过 require对图片进行动态绑定但vite创建的vue3则不可以通过require对图片进行可以通过一下方法进行绑定(注意vite根目录是，且vite会自动解析src中的字符串) 该方法在vue3中我并未测试，如果没效果 ，往下看其他方法。
vue中动态修改img标签中src的方法
黄钢的博客
07-04 7597
首先看vue中img标签的常规写法当src需要动态修改时，有点麻烦，经常忘记，记录一下。
vue3动态引入图片(:src)
Mr-yang的随笔
10-27 7129
vite 官方默认的配置，如果资源文件在assets文件夹打包后会把图片名加上 hash值，但是直接通过 :src="imgSrc"方式引入并不会在打包的时候解析，导致开发环境可以正常引入，打包后却不能显示的问题。实际上我们不希望资源文件被wbpack编译可以把图片放到public 目录会更省事，不管是开发环境还是生产环境，可以始终以根目录保持图片路径的一致，这点跟webpack是一致的。我们的目标静态文件在 src/assets/images/home/home_icon.png。
vite + vue3 动态加载 css
07-16
在使用Vite和Vue 3时，您可以通过动态加载CSS来实现按需加载样式。以下是一种实现方法： 1. 在Vue组件中，您可以使用`import`语句动态加载CSS文件。例如，假设您有一个名为`MyComponent.vue`的组件，您可以在需要的地方按需加载CSS文件。 ```vue <template> <div class="my-component"> <!-- 组件内容 --> </div> </template> <script> export default { name: 'MyComponent', mounted() { import('./path/to/your/css/file.css').then(() => { // CSS文件加载完成后的回调 console.log('CSS loaded'); }); }, }; </script> <style> /* 组件样式 */ </style> ``` 在`mounted`钩子函数中使用`import`语句来动态加载CSS文件。一旦CSS文件加载完成，您可以在回调函数中执行所需的操作。 2. 配置Vite以允许动态加载CSS。在您的Vite配置文件（例如`vite.config.js`）中，您可以添加`cssCodeSplit`选项来启用按需加载CSS。 ```javascript export default { // 其他配置项 cssCodeSplit: true, }; ``` 这样配置后，Vite会将每个组件的样式分割成独立的CSS文件，并在需要时按需加载。 请注意，动态加载CSS会导致额外的网络请求和性能开销。因此，建议仅在需要时才使用动态加载CSS，并根据项目需求进行权衡。 希望这可以帮助您实现动态加载CSS的功能。如有其他疑问，请随时追问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值