vue使用静态资源

最新推荐文章于 2025-03-15 00:00:00 发布
最新推荐文章于 2025-03-15 00:00:00 发布
阅读量331 收藏 1
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/tao__f/article/details/114098468
版权

1.导入：import yzgnImg1 from ‘@/assets/imges/home/yzgn-img1.png’
2.定义：在 data 中定义：yzgnImg1
3.使用：
<img
:src=“aurl”
alt=""
@click=“loginto”
>
aurl: img

vue静态资源加载
蛐蛐的博客
10-24 1989
1.简介 在一个vue项目中分为两种静态资源： public目录：存放外部js、css等 src/assets目录：存放组件img、background-image引用的图片等静态资源 2.public静态资源 2.1 外部静态资源 这些静态资源包含了编译之前就存在的外部js、css，如layui、jquery等等js文件，这些文件在index.html中引入如下： <link rel="icon" href="<%= BASE_URL %>...
在静态页面中使用 Vue.js
weixin_30624825的博客
08-13 1385
在静态页面中使用 Vue.js 不使用Node.js, NPM, Webpack 等, 在静态页中使用Vue.js. 包括路由, 单文件组件. 1. 创建index.html index.html做为项目的首页, 主要用来定义页面框架, 加载必需的css和script. 这里使用element-ui的导航菜单组件搭建了一个页面框架. 需要注意的是, <el-menu> ...
详解Vue-cli中的静态资源管理（src/assets和static/的区别）
12-04
你可能注意到了我们的静态资源共有两个目录src/assets和static/，你们它们之间有怎样的区别呢？ 资源打包 为了回答这个问题，我们需要了解webpack是如何处理静态资源的。在所有的*.vue文件中你所有的templates 和CSS 都被vue-html-loader 和css-loader 查询资源的URLs解析. 比如说, 在 img src=”./logo.png” 和background: url(./logo.png) 中./logo.png是一个相对资源路径，并且会被Webpack视为一个模块依赖来解析。 因为./logo.png并非一个Javascript，当将它
Vue-静态资源路径的使用
m0_74462339的博客
08-20 538
当你在 Vue 项目中使用@/assets或相对路径引用静态资源时，Webpack 会处理这些路径。@/assets是 Vue CLI 的路径别名，表示src/assets目录。如果你遇到错误，通常是因为 Webpack 未正确处理这些路径，或者你的静态资源没有正确地放在构建后的目录中。
彻底解决 Vue 打包后静态资源图片失效的终极指南
嗨，欢迎来到我的 优快云 博客小天地！一名深耕多年的技术发烧友。在这里，我将把日常工作中积累的宝贵经验，从复杂架构设计的精妙之处，到代码优化的实战技巧，毫无保留地分享给大家。
03-15 2104
彻底解决 Vue 打包后静态资源图片失效的终极指南
vue项目打包压缩静态资源—使用compression-webpack-plugin
niuniu2878499107的博客
08-30 3490
vue项目打包压缩静态资源—使用compression-webpack-plugin
详解vue静态资源打包中的坑与解决方案
08-28
Vue 静态资源打包中的坑与解决方案 本篇文章主要介绍了 Vue 静态资源打包中的坑与解决方案，主要解决路径问题。下面是详细的知识点： 一、 Vue-cli 默认配置打包后部署至特定路径下静态资源路径错误问题 * 问题...
Vue打包后访问静态资源路径问题
10-16
3. **使用`require`引入**：对于需要在JavaScript中使用的静态资源，可以通过`require`或`import`语句引入，Vue CLI会自动处理路径。 4. **使用`publicPath`选项**：在Vue配置文件`vue.config.js`（如果不存在，...
vue打包静态资源后显示空白及static文件路径报错的解决
11-19
今天使用vue打包（npm run build）遇到了几个坑，在这里分享给大家 打包之后打开dist的页面显示空白： 这个问题以前就处理过，是打包过程中出现错误频率较高的一种，可能有3处地方会出现这种情况 1、记得改一下...
解决vue打包之后静态资源图片失效的问题
08-28
解决 Vue 打包之后静态资源图片失效的问题 在 Vue 项目中， 经常会遇到一个问题，即在打包之后静态资源图片失效的问题。这种问题可能会导致图片无法显示，控制台中提示某个图片没有找到（404 错误）。这种问题的...
idea 部署git总结_specify commit message(1)
2401_84433924的博客
04-28 1134
github密匙快捷获取方法idea将本地项目上传到远程仓库GitHub报错-》error: src refspec master does not match any.
直接使用的vue.js
03-05
vue.js,可以直接下载引用至项目目录，引用至html页面进行样式的加载使用
Vue 动态加载public图片和图片预览例子
漫—流的博客
07-11 7403
一、vue 静态资源文件夹 Vue 有两个存放静态资源的文件夹：assets和public。 1、 assets文件夹 使用require()方法加载静态资源，如： require('./assets/image/success.png') 这里的文件经过webpack处理过的，require方法的参数不支持变量，只能存文件的路径，因此加载图片时不能动态获取。 2、public文件夹（以前vue1.0版本叫static） public文件夹的文件是不经过webpack处理，打包时直接把public复制到打
vue静态资源的引用(相对路径,绝对路径,@,~的一些笔记,以图片引入为例,含在线演示)
热门推荐
动感超人的博客
08-21 2万+
vue引入静态资源有相对路径和绝对路径的方式相对路径是URL开头有.绝对路径是URL开头为/或者省略不写相对路径相对的是当前文件绝对路径相对的是public目录并且引入的时候URL开头为~的使用在css里面引入静态资源的时候如果 URL 以 @ 开头会作为一个模块请求被解析。Vue CLI 默认会设置一个指向 src 的别名 @。
vue中实现动态引入静态资源
MMccGrady的博客
02-19 1843
小伙伴们在写代码的过程中大部分的资源都是从后端返回接受到的，如果遇到静态资源需要动态操作的情况下，很多小伙伴就不太熟悉了，今天分享一种刚学习到的方法
Web前端之Vue动态访问静态资源、静态资源的动态访问、打包、public、import、Vite、URL
优快云博客主页地址：https://mengjian.blog.youkuaiyun.com/
05-28 2391
Web前端之Vue动态访问静态资源、静态资源的动态访问、打包、public、import、Vite、URL
Vue中引入静态资源的几种方式
一个女胖子的博客
04-26 1万+
最近修改一些老项目，好多组件里面引入图片的方式不太一样，总感觉自己没有好好总结过，今天有时间参考了几篇帖子，就总结一下； 在总结之前看了一下vue-cli的文档，突然感觉之前可能是我忽略它了基本没有看过，官方文档这块写的清清楚楚，还是应该多看文档，天天看掘金、简书这些碎片化知识也不太好； Vue中静态资源引入机制 Vue.js关于静态资源的官方文档 静态资源可以通过两种方式进行处理： 在 JavaScript 被导入或在 template/CSS 中被引用。 这类引用会被 webpack 处理。诸
Vue项目中的静态资源引入
sinat_29789933的博客
09-01 3546
项目中有时候需要引入静态资源，比如无需修改的js文件等，且无法npm获取，一般作为缓存的静态资源，会放在static文件夹下（放在其他文件夹下面会报错，直接报静态资源内部的错误，排查了一天。），在index.html中引入。assets在src文件夹下面，src里面的文件是参与打包的，所以一般项目中的资源会放在assets文件夹下，使用相对路径即可访问。VUE_APP_ASSETS是自己在.env文件中设置的，BASE_URL是项目自带的，我这里是Public。
[Vue] 简介
emmmm.....
05-06 3980
1. 官网 2. 介绍与描述 3. Vue的特点 3.1. 采用组件化模式，提高代码的复用率，让代码易于维护。 3.2. 声明式编码，无需操作DOM，提高开发效率。 3.3. 使用虚拟DOM和Diff算法复用DOM 3.4. 遵循 MVVM 模式 3.5. 编码简洁, 体积小, 运行效率高, 适合移动/PC端开发 3.6. 它本身只关注 UI, 也可以引入其它第三方库开发项目 4. vue的特性 5. vue的版本 6. 学习Vue之前要掌握的JavaScript基础知识
vue3 使用静态资源图片
最新发布
03-29
### Vue3 静态资源图片的引入与使用 在 Vue3 项目中，正确引用和使用静态资源图片的最佳实践取决于资源存储的位置以及其用途。以下是详细的说明： #### 使用 `public/` 目录 如果图片属于全局可用的静态文件（例如 logo 或图标），可以将其放置在项目的 `public/` 目录下。这些文件可以通过根路径 `/` 进行访问[^1]。 ```html <img src="/logo.png" alt="Logo"> ``` 这种方式的优点在于无需通过 Webpack 处理即可直接加载资源，适合那些不需要模块化管理的静态资产。 --- #### 使用 `src/assets/` 目录 对于需要被 Webpack 加载器处理的图片（如按需加载或动态路径支持），推荐将它们放在 `src/assets/` 文件夹内。Webpack 能够优化这类资源并生成最终构建版本中的相对路径。 ##### 方法一：通过模板字符串绑定 可以在组件模板中使用相对路径来引用图片： ```vue <template> <img :src="require('@/assets/logo.png')" alt="Logo"> </template> <script> export default { name: 'App', }; </script> ``` 注意这里使用了 `require()` 函数，因为某些情况下 Vue 的编译器无法解析动态导入路径。 ##### 方法二：通过 JavaScript 导入 也可以利用 ES Module 的语法显式导入图片到脚本部分： ```javascript import logo from '@/assets/logo.png'; export default { data() { return { logo }; }, }; ``` 随后，在模板中可以直接绑定该变量作为 `src` 属性值： ```vue <template> <img :src="logo" alt="Logo"> </template> ``` 这种方法的优势是可以充分利用现代前端工具链的功能，比如压缩、懒加载等。 --- #### 动态路径引用 当遇到需要根据条件改变图像源的情况时，建议采用计算属性或者方法配合动态路径实现。例如： ```vue <template> <div> <img :src="getImageUrl(imageName)" /> </div> </template> <script> export default { props: ['imageName'], methods: { getImageUrl(name) { try { return require(`@/assets/${name}.png`); } catch (error) { console.error('Image not found:', error); return '/default-image.png'; // 默认替代图 } }, }, }; </script> ``` 上述代码片段展示了如何安全地处理可能不存在的图片资源，并提供了一个默认选项以防错误发生。 --- #### 外部链接图片 如果是来自第三方服务或其他域名下的远程图片，则只需指定完整的 URL 地址即可正常工作： ```html <img src="https://example.com/images/sample.jpg" alt="Sample Image"> ``` 这种情形通常用于展示 CDN 上托管的内容或是 API 返回的数据结果。 --- ### 总结 综上所述，针对不同需求场景可以选择合适的策略去管理和嵌套静态资源于 Vue 应用之中。无论是本地还是网络上的素材都能找到对应解决办法以满足开发要求。 ```python print("以上为关于 Vue3 中静态资源图片使用的总结") ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值