产品要求图片和它的名称一一对应,本来是非常简单的需求,后台直接返回图片路径和名称,前台直接读取就可以了,但是我们没有存储图片的服务器,再加上是一个实验性的需求,图片需要存放到前台。当时我想,vue 中的img 的src 可以动态绑定到一个变量上, 很简单吗,就没有考虑太多,直接开始做了。 首先和后台商量一下数据结...
我这时就想,把后台返回的代码进行重新组装,EnName 直接是图片路径。getFlower 方法修改如下 getFlower() { axios.get('/flowers') .then(res=>{if(res.status===200&& res.data.code===0) {this.flowers= res.data.obj.map(item=>{return{CnName: item.CnName,EnName:require(`./img/${item.EnName...
路径正确,但图片不显示 5. assets与static文件夹的区别 assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,如< img src=”./logo.png”>和background:url(./logo.png),”./logo.png”是相对资源路径,将有webpack解析为模块依赖 static:在这个目录下文件不会被被webpack解析。他...
总之记住v-for循环出的内容要保证唯一性就对了 再说一下MenuItem中的img项,此处记住Vue中对img进行绑定路径操作时,要用require包裹路径 img:src('...')//不能正确获取路径img:src=require('...')//可以正确获取路径 循环切换图片,本来是打算用swiper,但是很显然 犯懒了(下次一定不懒)。 于是用setInterval(...
解决vue的v-for循环中图⽚加载路径问题 先看⼀下产品需求，如下图所⽰，产品要求图⽚和它的名称⼀⼀对应，本来是⾮常简单的需求，后台直接返回图⽚路径和名称，前台直接读取就可以了，但是我们没有存储图⽚的服务器，再加上是⼀个实验性的需求，图⽚需要存放到前台。当时我想，vue 中的img 的...
简介:Vue3 v-for循环获取不到图片路径 想要利用v-for循环去实现图片输出,但是输出不了图片,发现路径错误 解决办法:在script里的data中,给图片设定绝对路径 博主发现很多博文都是说要改成带@的,但试了之后发现不行 即不是带@号的,而是"././某某.jpg" ...
放在static文件夹之后,不需要require引用图片路径,图片也可以加载出来 <template> </template> export default { data(){ return{ //将图片放在了static路径下面 images:['/static/img/kefu.png','/static/img/yuyue.png'] } } } 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14....
vue-cli 项目中本地图片放在assets目录下(原因vue-cli最开始的vue图片就在里面,就把所有图片放在里面了); 之后v-for 动态加载图片路径就遇到了问题 源码: <liv-for="(item,index) in teamInfo"@click="trastFun(item)">{{item.name}}{{item.position}}VSfor(vari =0;i<self.teamInfo.length;i++){va...
使用v-for加载静态界面时本地图片的渲染出来的路径不对,导致图片加载不出来 解决方案 vue+webpack 解决方案:使用require加载图片路径 const deviceList = ref([ { imgSrc: require('@/assets/images/failDevice.png'), }, { imgSrc: require('@/assets/images/runDevice.png'), }, { imgSrc: require...
路径正确,但图片不显示 5. assets与static文件夹的区别 assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,如< img src=”./logo.png”>和background:url(./logo.png),”./logo.png”是相对资源路径,将有webpack解析为模块依赖 ...