vue中动态引入图片地址

概要

两种情况，在public下，或src下,各种都有坑；

注意：下述内容均以vue-cli默认配置为前提

一、图片在public下，路径需以/开头

public 下的文件（包括图片）会被直接复制到dist下，而不做其他处理，如：原来在public/myImage下的文件，会被复制到dist/myImage下。这意味着我们只能通过绝对路径引用 (使用 / 开头的路径)。如：

<img src = '/myImage/xxx.jpg'>

当然，示例没有使用动态路径，动态路径同理；

巨坑：需要部署到web服务器的根路径下

根路径与二级路径的简单区别：根路径，就像Nginx的html下,tomcat的webapp,而在html或webapp下再创建文件夹用于放置打包完的文件（如:html/ui,webapp/ui），则为二级路径。

如果需要部署到二级路径下，则需要在路径上加二级路径的前缀，假如二级路径为OA,则上述图片需要设为:

<img src = '/OA/myImage/xxx.jpg'>

这样往往并不理想，因为一来多个地方引用，万一改二级路径名称，各个地方都得改，不利于维护，解决办法是把这个二级路径定义为一个常量，可以放到环境变量里（.env文件），也可以放到一个公共js文件，甚至放到package.json里。这样就可以到处引用了。

问题到此结束了吗？没有！

因为产品部署是运维人员做的，部署的二级路径是不固定的，这个值由运维人员决定。而运维人员拿到的是打包完了的压缩文件，所以这个配置二级路径的文件必须保持不变（文件名和内容保持不变），你一定想到了，那就是把文件放到public下！具体做法是：

1. 在public下创建env.js
1. 在env.js里定义publicPath
1. 把publicPath挂载到window下
1. 在index.html里用script标签引入
5 .引用:使用window.publicPath即可

简易代码如下：

//env.js
//单独定义是为了便于运维人员修改，使用var而不是const,是为了兼容低版本浏览器，因为这部分代码并不会被转为ES5

var publicPath='/ui'
window.publicPath = publicPath

<!--index.html-->
<script src="<%= BASE_URL %>env.js"></script>

二、图片在 src 下,使用require当模块引入

一般把图片放在src/assets目录下

使用require()引入，示例：

//path是在父组件传过来的参数
 const imgName = this.path.slice(1);
 const src = require(`../../../assets/menuImage/${imgName}.gif`)

注意事项

1. require里最多进行一次计算

就上述示例，假如require里有两个变量，那么资源找不到，假如我把公共路径前缀放到一个变量里：

//path是在父组件传过来的参数
const imgName = this.path.slice(1);
const publicPath = '../../../assets/menuImage/';
const src = require(`${publicPath }${imgName}.gif`);

上述代码无法正确找到文件！！！

2. 可以使用@，但不能使用/src

默认，@代表/src,可以使用@，但是如果使用/src会无法找到资源。@应该是按相对路径处理了。

//path是在父组件传过来的参数
 const imgName = this.path.slice(1);
 const src = require(`@/assets/menuImage/${imgName}.gif`)

上述示例可以正确找到资源。