vue中使用require来引入静态图片资源

最新推荐文章于 2024-01-20 14:03:34 发布
最新推荐文章于 2024-01-20 14:03:34 发布
阅读量370 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_54484537/article/details/131989958
版权
在Vue项目中，直接在DOM中引用的图片会被转换为base64格式，但通过变量引入或者JavaScript动态改变图片路径时，图片不会自动转为base64，可能导致无法正常显示。解决方法是使用require确保图片被正确处理。
摘要由CSDN通过智能技术生成

vue项目中，通过变量引入静态图片资源或者因为某些需求需要通过js来动态改变图片时，图片显示不出来。

原来是vue在DOM中直接引入的图片会被转为 base64 格式的，但是使用变量引入的话，图片不会转为 base64 格式的，所以不会 正常显示。

在js中使用变量来动态改变图片时，也使用 require 来改变变量的值

 

qq_54484537
关注
vue中动态引入图片为什么要是require， 你不知道的那些事
sybh的博客
11-01 7615
与静态资源相对应的还有一个动态资源，先让我们看看网上的各位大佬们怎么解释的。静态资源：一般客户端发送请求到web服务器，web服务器从内存在取到相应的文件，返回给客户端，客户端解析并渲染显示出来。动态资源：一般客户端请求的动态资源，先将请求交于web容器，web容器连接数据库，数据库处理数据之后，将内容交给web服务器，web服务器返回给客户端解析渲染处理。其实上面的总结已经很清晰了。静态资源就是直接存放在项目中的资源，这些资源不需要我们发送专门的请求进行获取。
Vue3 - vite 引入本地图片方法，页面引入本地静态资源图像详细教程，解决 UI 前端组件库的图片属性无法使用本地图像问题（无论是本地开发还是打包部署，本地图片的路径正常可用）
王佳斌
09-08 8819
vue3 vite引入使用本地图片，vue3 vite如何引入本地资源的图片图像，vite 怎么把本地的图片赋值给src图片标签属性，vue3 vite 使用require引入本地图像报错，vue3 vite组件库的组件怎么引入本地图片，vue3 vite 如何给组件库的图片属性链接本地资源的图像，element plus ant design vue 组件怎么使用本地资源的静态图片，vue3 vite版本 引入本地静态图片的方式，vue3 + vite引入本地图片，vue3如何加载本地图片等静态资源，引入
vue 动态改变静态图片以及请求网络图片的实现方法
11-30
在本身的项目中需要动态请求后端图片 一般需要在created中写因为beforeCreate的时候图片过不来的，如果想在这时候请求数据那么图片的地址我们就要存在一个地方。可以是本地也可以是vuex中 静态图片想要动态的添加或者改变我们需要改变图片的目录结构 把图片放在static中然后 imgUrl : [‘/static/clinical.png’,’/static/nursing.png’,’/static/function.png’,’/static/test.png’,’/static/drug.png’,’/static/admin.png’] 绝对路径请求 以上这篇vue 动态改变
vue项目中通过require引入静态图片路径
weixin_46125684的博客
12-01 1970
vue项目中通过require引入静态图片路径
vue动态加载静态图片
专注
10-30 134
【代码】vue动态加载静态图片。
vue.config.js中打包相关配置
最新发布
前端-尔嵘
01-20 1802
通过对chunk生成的css和js文件数量和大小做限制，对代码进行压缩和分割，线上生产环境下使用cdn方式等对webpack打包优化。
vue-cli 4.5.4 配置node-module里的图片不转base64
小白变不白
09-16 865
创建项目后我的vue.config.js只有一行 lintOnSave: false, 然后加入配置 var path = require('path'); //需要导入path 否则项目启动有问题 path is not defined module.exports = { devServer: { //热启动 修改完成后自动更新 // host: "localhost", /* 本地ip地址 */ //host: "192.168.0.131",
vue本地静态文件图片的require引入方式
lavendersue的博客
03-06 3946
<template> <img :src="imgUrl"> </template> <script> //方法1.直接将图片引入为模块 require imgUrl from "../../static/test.png" //或import imgUrl from "@/static/test.png" data(){ retu...
vue 直接访问静态图片_在使用vue中实现本地静态图片路径（详细教程）
weixin_39977586的博客
12-20 4978
这篇文章给大家介绍了vue中本地静态图片路径写法及Vue.js中引用图片路径的方式，需要的朋友参考下吧这里写图片描述需求：如何components里面的index.vue怎样能把assets里面的图片拿出来。1.在img标签里面直接写上路径：2.利用数组保存再循环输出： {{ item.title }}data: () => ({carouselData:[{url:require('...
详解Vue.js中引入图片路径的几种方式
10-16
在Vue.js中，正确地引入和使用静态资源，如图片文件，是一个重要的方面，因为这涉及到资源的管理和最终的应用打包。Vue.js 提供了多种方式来处理静态资源，尤其是在模板（template）和样式（CSS）文件中。以下是几种...
vue3引入图片等无法使用require，需要用newURL来动态引入图片等静态资源
wzy_PROTEIN的博客
06-13 8863
Uncaught (in promise) ReferenceError: require is not defined1、因为require是webpack提供的一种加载能力，但是vue3项目时搭配vite的，所以这里应该用vite提供的静态资源载入方法，将上面的require改为new URL这种格式，页面就可以正常加载静态资源了。new URL（‘路径’，import.meta.url）.href。
vue中动态引入静态图片
qq_36762151的博客
11-17 860
页面中不能直接将静态路径放入变量的方式引用。
vue3+element plus+vite 引入本地静态资源图片require报错的原因和解决方案，以及如何在表格中展示图片
m0_52043522的博客
06-02 4547
在写vue 3+element plus+vite 项目的过程中，require引入展示图片出现了报错，记录了一下错误原因和解决方法。
vue | require动态加载图片及遇到的报错
weixin_44864257的博客
04-26 1779
2. require不能用纯动态地址，必须要有图片的 路径+名称+后缀。2. 视图加载的时候未拿到数据，可以用v-if判断一下。（require是node用来加载并执行其它文件导出的模块的方法。结果图片无法显示，遇到了以下提示，而且获取图片名字还需要截取。使用require将url转为base64。1. 查看图片路径是否写错。在弹窗用以上操作的时候出现以下报错。1. 把图片数组改为图片名字。
Vue3+TypeScript+Vite如何使用require动态引入类似于图片等静态资源
热门推荐
Oliver尹的博客
07-28 2万+
Vue3+TypeScript+Vite的项目中如何使用require动态引入类似于图片等静态资源
ionic+requirejs实现图片的懒加载
zuo-yiran的博客
05-16 1595
上次写了ionic的懒加载，现在加上ionic+requirejs结合起来实现图片的懒加载，同样用了两个懒加载的js写，以其中一个为例。 第一种： 1.引入图片懒加载的js 在main.js中引入：lazy_load:'lazy-load',//ionic 图片懒加载main.js完整代码为：require.config({ paths:{ fastclick:'../
[技巧] Javascript模块化编程（三）：require.js的用法
xiaoaifei2010的专栏
11-10 1539
这个系列的第一部分和第二部分，介绍了Javascript模块原型和理论概念，今天介绍如何将它们用于实战。 我采用的是一个非常流行的库require.js。 一、为什么要用require.js？ 最早的时候，所有Javascript代码都写在一个文件里面，只要加载这一个文件就够了。后来，代码越来越多，一个文件不够了，必须分成多个文件，依次加载。下面的网页代码，相信很多人都见过。 复制
如何在Vue引入静态图片?
ea8d1n3的博客
02-13 5531
引言 本文介绍了在 Vue 项目中引入静态图片的两种方式, 即 require 和 import; 并给出了对应的使用方法, 可供大家参考; 另外也略微研究了一下这两种方式的区别和优劣, 不当之处, 请大家不吝指出. 原文地址: http://blog.duhbb.com/2022/02/13/how-to-import-static-img-in-vue/ 欢迎访问我的博客: http://blog.duhbb.com/ 正在写 Vue 的一个小 demo, 需要在对话框放置一张图片, 感觉应该不用请求后
vue动态加载图片
weixin_43829545的博客
04-10 780
1.如果你的图片在本地文件common文件下： 在页面中<img src="…/…/assets/common/bg.jpg",> 动态载入时： ：src={{imgsrc}} imgsrc:require（’…/…/assets/common/bg.jpg’）(require必须写) 2。移动你的图片static下 img：‘ ./stalic/arrow0.png,’ ...
vue3+ts 获取静态资源图片
10-16
在 Vue3 + TypeScript 中获取静态资源图片，可以使用 `require` 函数来实现。具体步骤如下： 1. 在 `src` 目录下创建一个 `assets` 文件夹，将图片放入其中。 2. 在组件中使用 `require` 函数引入图片，例如： ```...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值