关于vue src路径动态拼接的小知识

目录
  • vue src路径动态拼接
    • 第一种:本地添加
    • 第二种:从接口中获取图片的路径
  • 如何通过变量动态拼接url

vue src路径动态拼接

我是新手 今天写vue 的时候 让这个src 给我弄的懵懵 本来打算弄个轮播图加路径 但是怎么也不显示

第一种:本地添加

如果需要很多图片 一直加div就很烦 所有我就把所有图片写在数组里面

注意 引入图片路径一定要加 require 一定要加 require 一定要加 require

然后我用了mint-ui里面的轮播组件 使用v-for 把图片路径循环出来 使用v-bind:src动态绑定 后面

后面格式为 :src=“item.url” 不要写成 :src={{item.url}}

这样就好了

第二种:从接口中获取图片的路径

需要拼接服务器地址

我通过接口 获取了图片地址 放到了一个 空的数组里面

然后循环 数组

我的item.pic 就是图片路径 光路径是不行的 需要加上图片路径前面需要加上服务器地址

这时候注意 一点要加上http 一点要加上http 一点要加上http就是这个给我折磨了好长时间

直接加号拼接就ok了

如何通过变量动态拼接url

格式:

<a :href="'index.shtml?other='+object.name">这是一个动态链接</a>

需要注意的是href前要加上冒号,href最外层是双引号,中间是单引号。

<div class="tab-content" id="datatable">
	<div v-for="(object,index) in items">
		<!-格式如下,href前要加上冒号--->
	   <a :href="'index.shtml?other='+object.name">这是一个动态链接</a>
	</div>
</div>
<script>
    $(document).ready(function() {
        App.init();
        //数据列表
        var datatable = new Vue({
            el: '#datatable',
            data: {
                items: [],
            },
        });
        //从服务端获取数据
        getList();
        function getList() {
            $.ajax({
                url : "/sapi/getcluster",
                type : "post",
                dataType : "json",
                success : function(result){
                    if(result.status == -1){
                        window.location.href = result.data;
                        return false;
                    }
                    datatable.items = result.data["XXX"];
                }
            });
        }
    });
</script>

动态拼接结果为: href=“index.shtml?other=yyy”

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 关于Vue中img动态拼接src图片地址的问题

    下面看下Vue中img动态拼接:src图片地址,具体内容如下所示: 使用场景:根据后端返回图片标记来匹配本地图片资源 例如:根据后端返回k1标记,前端生成assets/images/inventory/k1.png图片资源路径 <template> <div class="fl"> <img :src="getImgUrl(gatherInfo.img1)" alt=""> <img :src="

  • vue render函数动态加载img的src路径操作

    分享一下我去如何解决vue render 中 如何正确配置img的src 路径? 一.我的项目中有俩层组件, 第一层父组件,第二层是render函数封装的组件,父组件调用render函数组件 二.render函数中需要创建<img>标签,img中的src是父组件传进来的: src正确传进来,图片却不不显示. 三.解决办法: 首先在父组件中将图片import进来, import empty from "./img/empty.png"; 在父组件的data中声明一个变量,将e

  • 使用vue实现通过变量动态拼接url

    如何通过变量动态拼接url? 格式:<a :href="'index.shtml?other='+object.name" rel="external nofollow" rel="external nofollow" >这是一个动态链接</a> 需要注意的是href前要加上冒号,href最外层是双引号,中间是单引号. <div class="tab-content" id="datat

  • 关于vue src路径动态拼接的小知识

    目录 vue src路径动态拼接 第一种:本地添加 第二种:从接口中获取图片的路径 如何通过变量动态拼接url vue src路径动态拼接 我是新手 今天写vue 的时候 让这个src 给我弄的懵懵 本来打算弄个轮播图加路径 但是怎么也不显示 第一种:本地添加 如果需要很多图片 一直加div就很烦 所有我就把所有图片写在数组里面 注意 引入图片路径一定要加 require 一定要加 require 一定要加 require 然后我用了mint-ui里面的轮播组件 使用v-for 把图片路径循环出

  • 关于Vue中过滤器的必懂小知识

    目录 前言 什么是过滤器 如何使用过滤器 全局过滤器 局部过滤器 过滤器可以串联 总结 前言 大家好,今天来分享下Vue中的过滤器小知识 什么是过滤器 Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持). 如何使用过滤器 全局过滤器 本案例是过滤价格中的¥和元 示例 ¥1999.00元 定义一个capitalize方法,传入value值 如果value为空返回空字符串 否则就叠加字符串"

  • vue动态设置img的src路径实例

    相信开发的小伙伴已经遇到这个问题了,动态切换img标签的src时,写的路径就是不生效,原因是vue并没有把你的路径字符串当做路径来处理,而是直接当做字符串了,当然网上也有很多方法,这里使用的是最有效的方法. 看代码: 使用导入资源的方式 <template> <div @click="home"> <img :src="home_url" alt="..." style="height: 10vw"

  • vue :src 文件路径错误问题的解决方法

    首先先说明下vue-cli的assets和static的两个文件的区别,因为这对你理解后面的解决办法会有所帮助 assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,如< img src="./logo.png">和background:url(./logo.png),"./logo.png"是相对资源路径,将有webpack解析为模块依赖 static:在这个目录下文件不会被webpack处理,简单就是说存放第三方

  • Vue项目中v-bind动态绑定src路径不成功问题及解决

    目录 v-bind动态绑定src路径不成功 解决方案 1 解决方案 2 解决方案 3 vue踩坑--动态v-for图片路径问题 问题所在 解决办法 实现代码 v-bind动态绑定src路径不成功 问题:在做Vue项目的时候,由于项目需求,需要动态绑定img的src时,突然发现如果说是直接请求后台接口的图片地址就能显示, 但是直接动态绑定img的src的图片的相对路径或者是绝对路径的时候,图片不能显示. 解决方案 1 当在给数据MyimgSrc 设置绝对路径或者是相对路径时应该使用require引

  • Vue中img的src是动态渲染时不显示的解决

    今天在项目中遇到一个需求,设计稿如下 就是展示用户头像,数据从后端获取,要是没有拿到则显示默认图片. 项目采用vue开发,本人也是第一次在实际项目中使用vue. 自然而然采用条件渲染,我的代码如下: 保存运行查看,发现没显示默认的图片,审查元素发现图片没有被打包 有点懵~ 后来查阅资料发现图片使用require引入即可,更改后代码为: 搞定~ 以上这篇Vue中img的src是动态渲染时不显示的解决就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • vue style width a href动态拼接问题的解决

    style width 这个问题 折磨了我一个上午了 好惭愧 因为项目涉及到 进度条 所以必须用行内样式 style 用过vue的都知道 vue中style的用法 大众用法 :style=" { width:30px } " 但是现在涉及到拼接了 直接上代码了 其中list是我data循环的数据 这是一个比例的关系 公开是拼接的时候 一直是报错的 一直出现文本 ' } ' = > 类似这些的东西 很显然 是拼接的问题 于是继续拼接 但是还是变着花样地出现这些鬼东西 于是发现 只要

随机推荐