vue 动态加载图片路径

在用vue-cli脚手架生成的vue项目开发中，动态加载图片本地运行没有问题，但是打包后图片无法显示，图片路径404找不到，
相关代码如下：

<template>
    <img :src="signalIconSrc['1']" class="basic-data-icon">
</template>
<script>
    export default {
        data() {
            return {
            signalIconSrc: {
                1: '../../assets/images/xinhao-1@3x.png',
                2: '../../assets/images/xinhao-2@3x.png',
                3: '../../assets/images/xinhao-3@3x.png',
            }
        }
    }
</script>

在解决这个问题之前，先来了解下vue-cli生成的vue项目是如何进行图片资源打包的
图片资源算是静态资源，而静态资源可以用两种方式进行处理

1. 在 JavaScript 被导入或在 template/CSS 中通过相对路径被引用。这类引用会被 webpack 处理。
2. 放置在 static 目录下或通过绝对路径被引用(vue-cli3是public目录)。这类资源将会直接被拷贝，而不会经过 webpack 的处理。

在vue的项目中，webpack使用的是vue-loader，在编译过程中，所有的资源路径例如 <img src="...">、background: url(...) 和 @import 会作为模块依赖。
而动态加载图片，图片的地址无法被解析，因此最终没有被打包到文件中，找不到该图片。

相对应静态资源的处理方式，解决问题的方法也有两种

1. 用require将图片作为模块引入

signalIconSrc: {
    1: require('../../assets/images/xinhao-1@3x.png'),
    2: require('../../assets/images/xinhao-2@3x.png'),
    3: require('../../assets/images/xinhao-3@3x.png'),
}

2. 将图片放在static目录下(vue-cli3为public目录)，使用绝对路径引用

   
   static目录

signalIconSrc: {
    1: 'static/images/xinhao-1@3x.png',
    2: 'static/images/xinhao-2@3x.png',
    3: 'static/images/xinhao-3@3x.png',
}