封装控件到html标签中,如何给封装在组件内的

例如：

组件TabBarItem.vuecss

{{title}}

exportdefault {

name:'TabBarItem',

props: {

title: {

type:String,

default:''

},

imgSrc: {

type:String,

default:''

}

}

}

对于封装在组件内的元素，不但愿将其src硬编码，可将其与组件的props属性imgSrc绑定，而后经过imgSrc传入值。

注意：不能给imgSrc直接赋一个字符串，或一个变量。

缘由：[html-loader]会将图像处理并添加到output目录，并且src属性将包含该图像处理后的最终url。可是直接赋一个字符串，或一个变量，值不会作处理，不是图像的最终地址。 html

有两种实现方式：

1、经过 require() 来引入图片，但要给它一个字符串参数。vue

2、将经过import将图片导入后，而后做为data选项的属性值，再绑定给imgSrc。webpack

import homeImg from'assets/img/tabbar/home.svg'

export default {

name:'TabBar',

data () {

return {

homeImg:homeImg

}

},

components: {

TabBarItem

}

}

参考webpack：web

import MyImage from './my-image.png'

// 该图像将被处理并添加到`output`目录，而且`MyImage`变量将包含该图像在处理后的最终 url。

// [html-loader]以相同的方式处理``。

// [css-loader]，CSS中的`url('./my-image.png')`会使用相似的过程去处理。loader会识别这是一个本地文件，并将`'./my-image.png'`路径，替换为`输出`目录中图像的最终路径。