vue引入动态资源问题处理

最新推荐文章于 2024-06-14 10:39:01 发布
最新推荐文章于 2024-06-14 10:39:01 发布
阅读量200 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ppxgf/article/details/132476704
版权

动态引入静态资源生产环境出问题原因：

1、vite脚手架支持css静态资源，

2、img中的src(静态路径)

3、import 引入的静态文件

4.new URL（）

所以解决动态资源引入问题方法图下：

使用new URL方法: 必须有一个动态的名称否则无效

new URL(`/src/assets/${静态资源图片名称}.jpg`, import.meta.url)

 

 

 打印url值  href就是我们需要的静态资源图片路径

 

 

ppxgf
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue框架笔记资源学习
01-04
Vue框架笔记资源学习 Vue框架是一种基于MVVM（Model-View-ViewModel）架构的前端框架，用于构建用户界面。它提供了一个灵活的框架来构建复杂的Web应用程序。 1.1 Vue框架的历史发展 Vue框架的诞生可以追溯到2014...
vue-cli与webpack处理静态资源的方法及webpack打包的坑
08-27
主要介绍了vue-cli与webpack处理静态资源的方法,需要的朋友可以参考下
vue3 + vite动态引入图片以及本地正常展示，线上部署不正常显示的解决方法
lth002的博客
09-21 1443
【代码】vue3 + vite动态引入图片以及本地正常展示，线上部署不正常显示的解决方法。
vue3引入图片等无法使用require，需要用newURL来动态引入图片等静态资源
wzy_PROTEIN的博客
06-13 7660
Uncaught (in promise) ReferenceError: require is not defined1、因为require是webpack提供的一种加载能力，但是vue3项目时搭配vite的，所以这里应该用vite提供的静态资源载入方法，将上面的require改为new URL这种格式，页面就可以正常加载静态资源了。new URL（‘路径’，import.meta.url）.href。
vue3+vite项目，动态svg build后，线上找不到图片问题
qq_41261490的博客
06-20 3225
好多时候，我们使用是svg都是动态的，就会有不同的src，这时，src就需要是一个动态的变量。我们按常规配置： 模板使用 上面这样使用，在本地都是找不到文件的。 但是直接在模板中这样使用是可以的 这是因为，把变量解析成了字符串，没有按路径去查找。 模板使用 上述这样使用，在本地是没有问题的，但是部署到线上就找不到了，查看源代码，线上把src最终解析成了[Object Object],可见打包后，没有去解析出真正的路径。 费了老半天劲，各种方式去试过，最后在vite文档中找到了答案； URL方式，不能使用模板
vite中引入静态资源 使用原生的new URL()实现静态资源的动态引入
qq_50630857的博客
09-19 1856
静态资源的动态引入 使用原生的new URL()
vue3+vite引入图片不能再用require,要使用new Url(完整方法步骤)
weixin_38345306的博客
10-26 1338
vue3+vite引入图片不能再用require,要使用new Url(完整方法步骤)
vite中动态加载图片地址
AdleyTales的技术博客
08-31 1134
new URL(`../assets/images/${name}.jpg`, import.meta.url);
天地图开发实战：Vue结合OpenLayers实现动态点位地图
06-06
本文详细介绍了如何使用Vue框架结合OpenLayers库来开发一个动态点位地图的组件。通过这个实战案例，读者将学习到如何集成天地图服务，并在地图上动态展示和更新点位信息。 主要内容： OpenLayers库的引入：文章首先...
vue打包静态资源后显示空白及static文件路径报错的解决
11-19
这个问题以前就处理过，是打包过程中出现错误频率较高的一种，可能有3处地方会出现这种情况 1、记得改一下config下面的index.js中bulid模块导出的路径。因为打包后的index.html里边的内容都是通过script标签引入的，...
如何配置vue.config.js 处理static文件夹下的静态文件
01-19
最近开发过程中遇到个小需求，需要根据需求动态配置一些静态数据，但我不想直接把这个静态文件引入进来，build时就会把数据打包到js文件中，造成js文件很大；呃呃。。。。（ps:就想给自己找点别扭） 回头看一下项目...
【傻瓜式教学】Vite项目中静态资源 动态路径处理（Vite打包后无法显示静态资源）
小安驾到的博客
11-09 3646
适用场景： img标签是通过v-for动态指定src路径的，本地可以正常显示，一旦打包之后就无法在线上显示了。 Bug原因： Vite打包只会处理静态src路径，动态src路径只会原样保留。
vue中实现动态引入静态资源
MMccGrady的博客
02-19 1627
小伙伴们在写代码的过程中大部分的资源都是从后端返回接受到的，如果遇到静态资源需要动态操作的情况下，很多小伙伴就不太熟悉了，今天分享一种刚学习到的方法
vue项目动态引入图片无法显示的问题
qq_53987671的博客
08-01 3935
vue项目动态引入图片不显示的问题解决
【Vue】vue3中动态导入资源
m0_62719309的博客
06-22 804
vue中动态导入资源
vite中动态引入图片，打包之后找不到图片地址？
业余前端的职业经历
03-13 2885
注意URL里面不能是纯变量，那样就会报错了 详细的报错 你可以去试试看。更好的就是直接在模板中调用一个函数 然后传入图片的名字就可以显示出来。不管是本地开发 还是打包之后都会找到具体的图片引入显示到页面中。一般来说项目中我们集中存放图片，然后希望在页面中直接引入！再src目录下 static 下创建一个images文件。然后在/src/utils/mixin.js文件。我们就可以在所有的组件模板中直接使用了。事实上确实可以办到，我们用到了一个。关注我持续更新 前端知识。然后在main.js中。
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 366
在vue.config.js中配置关闭Uncaught runtime errors显示。
关于element-plus中el-select自定义标签及样式的问题
最新发布
x_XDGS的博客
06-14 192
element-plus， el-select，自定义标签，动态更改颜色样式，更该样式
vue文件中能否使用script引入离线资源
09-02
在Vue文件中是可以使用`<script>`标签来引入离线资源的。通常情况下，Vue的组件会通过`<template>`标签定义DOM结构，通过`<style>`标签定义样式，而逻辑代码则放在`<script>`标签中。 当需要引入离线资源时，我们可以在`<script>`标签中使用`import`或`require`语句来引入相关资源，如JavaScript文件、json文件等。例如，我们可以引入一个本地的JavaScript工具库： ```html <script> import utils from './utils.js'; // 使用utils中的函数 utils.doSomething(); </script> ``` 这里假设`utils.js`是一个位于Vue组件同一目录下的JavaScript文件。通过使用`import`语句将其引入，就可以在Vue文件中使用其中定义的函数了。 需要注意的是，在Vue文件中使用`import`语句需要使用工具如Webpack或Babel等进行打包处理，以将模块导入转换为浏览器能够识别的代码。另外，如果需要引入其他类型的离线资源，如图片、CSS文件等，可以使用相应的标签或语法进行引入。 总而言之，在Vue文件中我们可以使用`<script>`标签引入离线资源，但需要配合相应的工具进行处理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值