Vue项目在＜swiper＞组件里引入src路径下图片

最新推荐文章于 2024-07-11 10:25:44 发布
最新推荐文章于 2024-07-11 10:25:44 发布
阅读量1.3k 收藏 1
点赞数 1
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012273935/article/details/110949551
版权
本文介绍了如何在Vue项目中，通过Swiper组件正确引入src目录下的图片。首先，需要在package.json中进行配置，然后在Vue文件中按照指定格式引入图片。

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

–Step1–
在package.json文件中修改如下：

"devDependencies": {
"@vue/cli-plugin-typescript": "4.5.4"
}

修改完package后，webStorm会自动安装组件；
–Step2–
2.在vue文件中引入格式如下：imgUrl:require('../images/touchHeader/independentTravel.png')
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201210114021530.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIyNzM5MzU=,size_16,color_FFFFFF,t_70
在这里插入图片描述

最低0.47元/天 解锁文章
Edison_1995
关注
UIWebView加载本地图片
你就是我心中的棉花糖的专栏
08-29 1423
UIWebView加载本地图片，如何将本地图片显示到网页
Vue之轮播图组件vue-awesome-swiper安装与使用
我能在河边钓一整天的鱼
01-12 1771
目录 github地址 安装npm命令 全局引入到项目中 如何使用轮播图组件 自定义轮播图组件 我们需要的轮播图没有左右箭头，也没有滚动条。 接下来我们要添加轮播图片，并设置图片格式 显示轮播图的页码 动态绑定轮播图的图片 如何禁用轮播图的自动播放功能 github地址 https://github.com/surmon-china/vue-awesome...
vue 组件中图片地址，图片获取
cvper's world !
05-05 5717
前提：在组件中使用引用图片，用于<img src>  或者  背景图片background;当我们利用vue-cli 搭建好项目的框架，开始高高兴兴开发组件的时候，有的时候想加一张图片，或者在样式中加个背景，会发现，图片引用不进来，这可愁坏了不是；组件中引用图片用于 <img src="???">使用图片之前，我们可以这么做，在组件的script 中引入图片，下面示例引入一...
swiper插件使用
qq_46372132的博客
08-30 303
swiper插件使用详细介绍,看这一篇就够了
vue swiper本地图片显示问题
weixin_44167504的博客
11-16 1912
vue swiper本地图片显示问题 要点：非/static路径下，图片路径都需要添加require(’~imgurl’) data() { return { //图片路径 swiperImg: [ {srcs: require('@/assets/img/swiper/1.jpg')}, {srcs: require('@/assets/img/swiper/2.jpg')}, {srcs: require(
vue性能优化，vue中swiper lazy懒加载图片路径问题
Chris__wang的博客
05-23 3521
在做vue项目的时候，优化性能的时候不可避免的要对图片进行懒加载提高网站性能 但是总会出现正常访问图片url没问题，使用懒加载后路径就不对 不管是使用vue-lazyload 还是使用swiper中的lazy模式，都会出现上述问题，那是因为项目运行编译后的地址会发生变化，但是你使用的却是编译前的地址，不管是使用相对路径还是绝对路径都肯定会发生错误 解决办法 拿swiper-lazy为...
vue-cli webpack 引入swiper的操作方法
12-01
本文将详细介绍如何在基于vue-cli和webpack构建的Vue项目中引入Swiper。 首先，你需要从Swiper的官方网站（http://www.swiper.com.cn/）下载所需的js和css文件。将下载的`swiper.min.js`放入项目的`static`目录下，...
vue2项目使用swiper实现轮播效果（超详细）
weixin_47600678的博客
03-06 3491
vue2项目使用swiper实现图片轮播效果
vue中引用swiper轮播插件的教程详解
10-18
在组件的`<script>`标签中，引入Swiper的CSS文件和JavaScript模块： ```javascript import 'swiper/dist/css/swiper.css'; import Swiper from 'swiper'; ``` 接着，创建一个Vue组件，例如名为`Slider.vue`。在`...
【Vue】v-for循环图片绝对路径，图片无法显示
Owen的博客
10-31 2051
1、src 和 :src <swiper-slide v-for="item of swiperList" :key='item.id'> <img :src="item.srcUrl" /> <!--<img v-bind:src="item.srcUrl" />--> </swiper-slide> 图片循环的时候，要用 :src，是 v-bind:src 的简写形式。 2、第一种情况：如果图片放在 src 文件夹下
vue中swoper使用本地图片
m0_65382120的博客
05-16 548
vue中swoper使用本地图片不能直接渲染出来，图片出不来，需要加 require 如下 colorList: [ { srcs: require("../../../src/assets/imgs/p1.jpg") }, { srcs: require("../../../src/assets/imgs/p2.jpg") }, { srcs: require("../../../src/assets/imgs/p3.jpg") },
uni-app u-swiper 自定义 选中样式
inzv520的博客
07-11 1156
u-swiper 选中样式 自定义
vue的swiper组件使用，获取当前滑动位置activeIndex
风烟
04-26 1万+
使用vue版的swiper组件vue-awesome-swiper，这个是最好用的，并且api和swiper基本一致。 使用的时候需要拿到滑动之后当前的index。 要获取activeIndex这个值。 错误写法 官方文档这么写有问题，我在全局引入的时候这样根本拿不到。 正确写法 this.$refs.mySwiper.swiper 这样写才可以。 然后监听@slideChange="slid...
如何获取swiper前页索引值与内容
Yiu的博客
02-08 1万+
当我们swiper左右滑动页面的时候，需要获取swiper active当前页的索引值或者内容，在swiper3.4.2等旧版和现在的swiper4.0.1等新版是不一样的，要分开进行学习，主要是slideChange事件不一样，下面看本人制作的swiper教程。 html内容如下，例如。 <divclass="swiper-container"> <!--添加一个s...
swiper动态添加图片问题
webZRH的博客
06-11 8223
swiper （Table切换和动态加载时候出现的问题） 本文为让心灵-去旅行原创，转载请说明.。 我们在写一个简单的swiper图片轮播的时候很简单，是写死的也就那么几张图片轮播。如果这时候图片和一些东西是后台的，你从js里动态添加到DOM时，这时候你就会发现各种问题。比如轮播图不动，无法滑动。下面的指示小圆点变得混乱了。等等。其实这些都是swiper的渲染问题，因为简单的s
HTML5中swiper实现图片查看功能
DemonBoy001的博客
12-20 4099
swiper实现图片查看功能 分享一个swiper实现的图片查看功能，支持图片点击放大、轮播、关闭等功能。先看一下效果图 以下是核心代码 function(){ var img_index = $("#article img").index(this);//点击了第几张图 //首次点击引入js，向文档添加元素并初始化swiper if(true){ var swiper_slider = ‘’;...
Swiper实现图片轮播
banana960531的博客
01-11 1万+
关于Swiper（https://www.swiper.com.cn/） Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架，使用硬件加速过渡（如果该设备支持的话）。主要使用于移动端的网站、移动web apps，native apps和hybrid apps。主要是为IOS而设计的，同时，在Android、WP8系统也有着良好的用户体验，Swiper从3.0开始不再全面支持PC端。因...
swiper 定位到指定页面或位置
热门推荐
hongweigg的专栏
09-20 4万+
背景： 使用swiper控件进行图片展示，既有条件是: （1）有一个图片数组，包含图片的url （2）有一个图片文件名列表（表格） （3）图片文件名列表中的数据来源于图片数组 问题： 现在要求利用swiper进行图片显示，点表格中的图片文件名，能用swiper进行展示选中的图片，同时，能使用swiper进行前后切换，查看图片数组中的其他图片。 解决： （1）点击图片文件
img图片标签设置src的值并重载地址
awangwu的博客
10-10 2619
$("#imgId").attr('src',data.url);  
<template> <div class="center-data" :class="[props.modelListShowState ? `` : `position`]" > <div class="typename"> <div class="typetitle" :class="[activetypeindex == index ? `active` : ``]" v-for="(item, index) in krpanodata.state.modelType" :key="item" @click="changeType(item, index)" > {{ item.name }} </div> <div class="line"></div> </div> <!-- <div class="remove" @click="emit(`modelListState`)">关闭</div> --> <div class="list"> <div class="mySwipers swiper"> <div class="swiper-wrapper"> <div class="swiper-slide custom-slide" v-for="(slide, index) in slides" :key="item" > <div class="center-box"> <img class="icon1" @click="gomodelDetils(slide)" :src="slide.img" alt="" /> <div class="data-bg"></div> <!-- <div class="button">{{ slide.title }}</div> --> </div> </div> </div> <!-- 分页器 --> <div class="swiper-pagination"></div> <!-- 导航按钮 --> <!-- <div class="swiper-button-prev left"></div> <div class="swiper-button-next right"></div> --> </div> <!-- 将导航按钮移到swiper容器外 --> <div class="swiper-controls"> <div class="swiper-button-prev left" :class="{ 'swiper-button-disabled': isBeginning }" @click="swiperPrev" ></div> <div class="swiper-button-next right" :class="{ 'swiper-button-disabled': isEnd }" @click="swiperNext" ></div> </div> <div class="activename"> <div class="name"> {{ slides[actvieindex].title }} </div> </div> <div class="swiper-pagination"></div> </div> <img @click="emit(`modelListState`)" class="remove" src="@/assets
最新发布
03-15
### Vue组件中动态类名绑定及Swiper滑动效果实现与优化 #### 动态类名绑定的最佳实践 在Vue中，动态绑定HTML的`class`可以通过多种方式实现。一种常见的方法是利用对象语法来控制类的存在与否[^1]。这种方式不仅...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值