vue里动态添加图片

最新推荐文章于 2024-05-17 11:40:43 发布

向梦出发_mm

最新推荐文章于 2024-05-17 11:40:43 发布

阅读量278

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_46122878/article/details/128953036

文章讲述了在初始代码中直接使用CSS设置背景图片路径导致的问题，以及如何通过修改为使用require和backgroundImage属性来正确导入和设置背景图片，确保图片在项目中的正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

初始方法并不可行：

 $(".flex-content .yxy-ally-wrapper").css(
    "background,url("../../../../assets/image/register/yxy/merchant/ls_bg.png") 
  );

正确方法：

 $(".flex-content .yxy-ally-wrapper").css(
    "backgroundImage",
    "url(" +
      require("../../../../assets/image/register/yxy/merchant/ls_bg.png") +
      ")"
  );

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

向梦出发_mm

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vue - 引入图片（动态）的三种方法及使用场景

资深程序员

01-10

4270

前言如果您想要动态使用就必须使用 require 引入图片，或者使用网络图片 / Base64 编码图片。例如，典型的不用 require 引入图片的错误示例，如下代码所示： <img :src="src"> data() { src: '../image.png' } 当页面完成加载后，路径被加载器解析为字符串，如下代码所示：  <img src="'../image.png'"> <!-- 而正确的解析应为 ↓

移动端uniapp使用uview组件在表单中上传图片并回显，预览，删除操作

快来一起学习前端知识把！加油，前端人

07-11

5130

移动端uniapp使用uview组件在表单中上传图片并回显，预览，删除操作

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

vue中动态引入图片

不可云

02-29

3059

可以看出普通加载的图片会被编译成/img/img.13eb2ff7.jpeg这种路径，而动态加载的还是原始路径，这是因为webpack或vite，会将代码编译，最终在内容内构造出一个类似于打包后的dist文件，而就会将普通方式图片路径编译转化成dist文件夹下img文件夹下的资源。很多时间，不管是vue2，还是vue3开发中都会遇到，动态渲染图片的功能，但是为什么我们直接将图片的路径直接赋值给变量的时候，图片渲染不出来，而通过require引入加载图片后却能正常渲染呢？（以下代码为vue3，vue2一样）

记录--vue中动态引入图片为什么要是require，你不知道的那些事

林恒的博客

11-04

1732

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助相信用过vue的小伙伴，肯定被面试官问过这样一个问题：在vue中动态的引入图片为什么要使用require 有些小伙伴，可能会轻蔑一笑：呵，就这，因为动态添加src被当做静态资源处理了，没有进行编译，所以要加上require，我倒着都能背出来...... emmm... 乍一看好像说的很有道理啊，但是仔细一看，这句话说的到底是个啥...

vue项目中加入图片和背景图：img、background-image

m0_72822997的博客

02-21

5334

vue 动态绑定背景图片的方法

12-29

vue动态绑定背景图片的方法，具体介绍如下所示： 1.backgroundImage && 三目运算符 1.backgroundImage <div class=right-con :style={backgroundImage: 'url(' + coverImgUrl + ')', backgroundS

Vue动态加载图片在跨域时无法显示的问题及解决方法

10-15

本文主要探讨了在Vue项目开发中遇到的一个常见问题——动态加载的图片在跨域环境下无法正常显示的问题。这个问题的根源在于浏览器安全策略限制，导致前端应用无法直接从不同源（域名、协议或端口）的服务器上加载...

vue 动态改变静态图片以及请求网络图片的实现方法

11-30

静态图片想要动态的添加或者改变我们需要改变图片的目录结构把图片放在static中然后 imgUrl : [‘/static/clinical.png’,’/static/nursing.png’,’/static/function.png’,’/static/test.png’,’/static/drug....

vue动态渲染svg、添加点击事件的实现

10-15

当我们在Vue项目中需要动态渲染SVG以及为SVG图形添加交互功能时，如点击事件，我们需要了解如何结合这两个技术。接下来，我们将详细介绍Vue动态渲染SVG以及为SVG添加点击事件的实现过程。 ### Vue动态渲染SVG 在...

vue 动态添加 HTML元素

06-13

如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。如果没有提供 elementOrSelector 参数，模板将被渲染为文档之外的的元素，并且你必须使用原生 DOM API 把它插入文档中。

vuekonva-designer:基于VueKonva的物可视设计器（IoT），有拖拽图片图标，添加文字，绑定事件等功能

03-20

维Kong瓦项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 运行单元测试 yarn test:unit 整理和修复文件 yarn lint 自定义配置请参阅。

vue-konva：Vue和Canvas-JavaScript库，用于使用Vue绘制复杂的画布图形

02-06

Vue Konva Vue Konva是一个JavaScript库，用于使用Vue绘制复杂的画布图形。它提供了声明性和React性绑定。所有vue-konva组件都对应于具有前缀“ v-”的同名Konva组件。可用于Konva对象的所有参数都可以在config中作为对应的vue-konva组件的config添加。核心形状包括： v-rect ， v-circle ， v-ellipse ， v-line ， v-image ， v-text ， v-text-path ， v-star ， v-label ， v-path ， v-regular-polygon 。您

canvas绘图库——Konva入门

yun_master的博客

03-08

1928

首先要区分几个概念舞台所有的画面都将在这个舞台展示 Konva.stage(container,width,height); 图层每个图层都是一个canvas的dom层.在使用时需要将layer通过stage.add方法加入到stage层 Konva.layer(); 元素 1、图片 Konva.image(options) 2、图形 Konva.Rect(options) 3、文字 Konva.Text(options) 控件 Konva.Transformer(options) 元素绘

Konva（一个HTML5 Canvas JavaScript 框架）快速入门

山有木兮木有枝心悦君兮君不知

01-21

1986

1.引入Konva 方法一：使用包管理器: npm install konvaf 方法二：用 <script> 标签: <script src="https://unpkg.com/konva@4.0.0/konva.min.js"></script> 2.创建舞台 <div id="container"></div> <script> var width = windo.

动态加载图片

ha_ha_en的博客

06-01

3115

在前端，模块的引入默认是不支持全动态引入的（即：require(变量)），支持半动态引入（即：require(静态路径+动态变量路径)）今天有个需求是从后台查询出图片的相对路径，然后遍历写入到网页结构中实现图片的动态展示。3.require使用及注意事项。1.相对路径和绝对路径、根目录。2.vue页面加载图片的原理。

vue动态引入图片