文档章节

vue--dom中字符串拼接、img地址拼接问题

o
 osc_wws45aot
发布于 2019/08/21 11:28
字数 811
阅读 10
收藏 0

精选30+云产品,助力企业轻松上云!>>>

主要问题: img 地址拼接不显示图片

###0. 其它 上一篇:Leafletjs--点、线、多边形的绘制 链接:Img在js中动态赋值src属性,加载不到图片

###1. 引发的问题

  • 这个关于拼接的问题事由另一个需求引起
  • 需求是:在 select 下拉中,为每一项选项附上相应的图片

本来以为是非常简单的需求,当时想象的不就是在 option 里面加个 img 标签吗,不要太简单,做了之后才发现 option 中竟然不可以加任何的其它元素,也是基础不到位,当时我就蒙了,经过一番的查找,找了一些解决方案,其实效果并不是太好……

  • 效果 效果.png(已经和开始的需求完全不一样了……)

然后我就想,没有别的解决方法了吗?

主流的解决方法是:用其他标签元素加上 css 控制来模拟 select 的效果

在 vue 中有没有好的解决方法?

还真的有,下面的就是 iview 里面的组件修改实现,已经完全符合一开始的需求效果了。

iview组件修改效果.png

###2. vue中dom拼接

  • vue 中的字符串拼接与普通的字符串拼接模式有些区别,需要在引号中再嵌套引号
  • 例子
// 例子1
<a v-bind:href="'/forum/list/?id=' + id" >

// 例子2
<img :src="`https://.../assets/${ss[1]}.svg`" alt="" />

###3. 引用

  • iview 的引用照着官网引用一下就可以了
  • 引用组件
<template>
    <Select v-model="model9" style="width:200px">
        <Option value="New York" label="New York">
            <span>New York</span>
            <span style="float:right;color:#ccc">America</span>
        </Option>
    </Select>
</template>
<script>
    export default {
        data () {
            return {
                model9: ''
            }
        }
    }
</script>
  • 效果 组件效果.png

###4. 修改

可以看到上面组件与我需要的效果还是有区别的,但是在结构上已经是对的了 疑问:option 中不是不可以添加其它的标签元素吗? 扒一扒,看看它是怎么渲染的 渲染.png 果然,它还是用 ul > li 模拟出来的,这下子明白了

  • 简单研究了一下后,可以完全按照自己的需求来改
<template>
	<div>
		<Select v-model="model9"  style="width:200px"  >
			 <Option value="New York" label="New York">
                   <span>New York</span>
                    // 改成 img 就可以了
                   <img src="../../test.png" alt="">
              </Option>
		</Select>
	</div>
</template>

###5. 衍生问题,图片不显示问题

  • 换成 data 数据去循环渲染出来
  • 分了两种为 本地图片渲染 和 网络图片渲染
// 一开始我的方法,无效,图片加载不出来
<!-- <img :src="`../assets/${ss[1]}.svg`" alt="" /> -->

// 最终修改,正常加载
<img :src="require(`../assets/${ss[1]}.svg`)" alt="" />

 // 网络图片,这样就可以正常显示
<!-- <img :src="ss[2]" alt="" /> -->
  • 为什么需要 require

不用 require ,路径会被加载器解析为字符串,所以图片找不到

  • 最后
<template>
	<div>
		<Select v-model="model9" 
		        style="width:200px" 
		        @on-change="getData">
			<Option v-for='(ss,index) in age' :value="ss[0]" :label="ss[0]" :key= 'index'>
				<span>{{ss[0]}}</span>
                // 本地图片渲染
				<img :src="require(`../assets/${ss[1]}.svg`)" alt="" />
                // 网络图片
				<!-- <img :src="ss[2]" alt="" /> -->
			</Option>
		</Select>
	</div>
</template>

<script>
export default {
	data() {
		return {
			model9: '',
			age: {
				test1:['消防箱','erwei_xiaofangshaxiang','https://timgsa.baidu.com/timg.jpg'],
				test2:['出入口','xiaofanglei_anquanchukou','https://timgsa.baidu.com/timg.jpg']
			}
		};
	},
	mounted() {
		this.getData();
	},
	methods: {
		getData(obj) {
			console.log(obj);
		}
	}
};
</script>

<style>
.ivu-select-item {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

img {
	height: 1.75rem;
	width: 1.75rem;
	margin-left: 0.625rem;
}
</style>

###6. 结束

问题不大,但是最后相当于解决了 2~3 个问题。

点个赞呗!

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
Vue SSR的渲染性能

一.前言 前端技术年年有新宠,Vue.js 2.0以其轻量级、渐进式、简洁的语法在MVVM框架中脱颖而出,一经推出便很受业界青睐。 为了提高首屏渲染速度 缓存+直出 是必不可少的。在Vue 1× 时代,没...

osc_299p2kiy
2018/03/26
1
0
legend2---开发日志13(layer_mobile的content传入dom 出现【object object】如何解决)

legend2---开发日志13(layer_mobile的content传入dom 出现【object object】如何解决) 一、总结 一句话总结: layer_mobile.content只能为string类型 方法一:将dom转成字符串,比如$('$a...

osc_dfoo6teb
2019/05/03
1
0
Vue2.x与bootsrap-table动态添加元素和绑定事件无效

 一、问题:    最近在使用vue与bootstrap-table结合生成表格时,按以前的经验----每列数据可用formatter:function(value,row,index){}进行一些其他的操作,动态拼接的html元素和绑定的方...

osc_3xmkn220
04/16
22
0
vue动态绑定src加字符串拼接

关键点 1.img中的src的字符串动态拼接 2.style中的background属性赋值 一.img中的src的字符串动态拼接 1.问题是这样子的,瞧瞧 基本网络链接 : http://openweathermap.org/img/w/02n.png ; 但...

osc_gay6i4ve
2019/03/05
5
0
*** && CSR

概念 服务端渲染 服务端在返回 html 之前,在特定的区域,符号里用数据填充,再给客户端,客户端只负责解析 HTML 服务端渲染 也被称为 fat-server, thin-client 模式 服务端渲染 客户端渲染 ...

梦想代码
2018/06/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Hacker News 简讯 2020-07-10

更新时间: 2020-07-10 01:15 US Supreme Court deems half of Oklahoma a Native American Reservation - (reuters.com) 美国最高法院认为俄克拉荷马州的一半是印第安人保留地 得分:131 | 评...

FalconChen
7分钟前
0
0
OSChina 周五乱弹 —— 求求你吃了我吧,不要再玩弄食物的感情了

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @巴拉迪维 :张喆的单曲《陷阱 》 这首歌已经在网易找不到原唱了,不知道被哪家买了版权。#今日歌曲推荐# 《陷阱 》- 张喆 手机党少年们想听歌...

小小编辑
18分钟前
18
1
清华陈文光教授:AI 超算基准测试的最新探索和实践。

道翰天琼认知智能平台为您揭秘新一代人工智能。 无规矩不成方圆。放在超级计算机的研发领域,没有一个大家普遍接受的算力评测指标,便难以推动超算迅猛发展。 而现在伴随着人工智能的发展,大...

jackli2020
32分钟前
0
0
@RequestMapping, consumes 提交简单有意思的测试

getParm @GetMapping("getParm")public Result getParm(String id){ System.out.println(); return ResultFactory.success(id);} 等同于 == bodyParm @PostMapping("bodyParm......

莫库什勒
43分钟前
25
0
63. Unique Paths II

题目: 63. Unique Paths II A robot is located at the top-left corner of a m x n grid (marked 'Start' in the diagram below). The robot can only move either down or right at any p......

JiaMing
今天
46
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部