Vue/iView中img显示图片路径问题，解决图片不显示问题

问题描述

遇到一个问题，在Vue中使用img显示图片，如下代码是可以显示出来图片的。

<!--使用@代表根目录-->
<img src="@/assets/add.svg"  @click="addClicked"/>

但是如果通过绑定的方式（或者说使用动态的src的时候）就不行了：

<template>
    <div>
        <img :src="addImgSrc"  @click="addClicked"/>
    </div>
<template>

export default {
    name: "MyComp",
    data() {
        return {
            addImgSrc: '@/assets/add.svg'
        }
    }
}

另外iView中render出来的img也是不行：

data() { return { addImgSrc: '@/assets/add.svg' } }

h('img', {attrs: {src: addImgSrc}, style: {width: '14px', height: '14px', marginTop:'5px', marginLeft: '5px', marginRight: '5px'}})

问题解决

使用require('')，如下：

data() {
    addImgSrc: require("@/assets/add.svg");
}