在基于 vue-cli 实际开发过程中，很多小伙伴都会遇到关于图片显示的困扰，不管怎么设置，图片就是显示不出来，今天我们来详细说说这个问题。
图片无法显示，绝大部门的情况是图片路径问题，要搞懂路径问题，分别有相对路径与绝对路径
实际开发中使用图片最多的场景有以下三种：
1、手动引入
<template>
<img :src="/UploadFiles/2021-04-02/imgurl">
使用require或import方式引入图片时，引入路径是相对于当前文件路径的，编译时webpack会介入并把路径处理成服务器绝路径
2、相对路径
<img src="/UploadFiles/2021-04-02/logo.png">
在 vue-cli 中使用相对路径时，webpack会自动介入，上面的代码在编译时自动变成
<img src="/UploadFiles/2021-04-02/logo.png')">
最终在页面的显示效果与以上手动引入方式一致
3、绝对路径
<img src="/UploadFiles/2021-04-02/logo.png">
使用绝对路径，首先要了解服务器根目录在哪，大家都知道，在 vue-cli 的项目本身自带一个服务器的，基于 webpack-dev-server 模块，根目录为 public 文件夹，所以，使用 绝对路径 的方式展示图片，必须把图片放到 public 文件夹，这也是最简单的一种方式，这种方式webpack不会介入，所以最终显示效果与引入时的代码一致，代码如下：
最终显示效果
4、数据中的图片
<template>
<ul>
<li><img :src="/UploadFiles/2021-04-02/item.imgurl">
这种情况应该是最常见的（ajax请求数据回来，然后遍历写入到页面结构中），这个时候绑定到 src 属性的是一个变量，无法直接手动 import 或 require ，如果直接使用 imgurl 属性中的路径， webpack不会介入处理 ，所以以上代码是无法正常显示图片的，解决方法如下：
方法1：遍历数据，使用前先手动 require
在前端，模块的引入默认是不支持动态引入的（即不支持：require(变量)），如下
this.goodslist = this.goodslist.map(item=>{
// 虽然路径是正确的，但以下方式引入会报`Cannot find module '../assets/logo.png'`
// item.imgurl = require(item.imgurl);
// 正确的方式为
item.imgurl = require('../img'+item.imgurl.replace('../img',''))
return item;
})
有小伙伴可能会觉得奇怪，为什么这样做就可以了，Webpack 在处理动态名称模块名的时候，会直接将能识别的静态路径和路径下的所有子文件都作为模块处理，如： require('../img'+imgName) ，能识别到 ../img 目录，并将该目录下所有文件当做模块处理，做成一个Map映射以便后面进行匹配，所以能识别到对应的文件，其原理是 require.context ，属性如下：
require.context(directory,useSubdirectories,regExp)
- directory {String} -读取文件的路径（一般为一个目录）
- useSubdirectories {Boolean} -是否遍历文件的子目录，默认false
- regExp {RegExp} -匹配文件的正则，默认匹配所有文件
方法返回一个函数（假设为fn），传入图片路径（不包含directory的路径）可得到处理过的图片对应路径（如：fn('./goods1.png')，） ，上面的代码等效于
this.goodslist = this.goodslist.map(item=>{
const fn = require.context('../img',false,/^\./);
const file = item.replace('../img','.')
item.imgurl = fn(file);
return item;
})
方法2：在数据库端直接使用绝对路径，并把所需图片放到 public 目录中
imgurl的格式为: '/img/goods1.png'
标签：
vue-cli4,图片显示
南强小屋 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
南强小屋 Design By 杰米
暂无彻底搞懂并解决vue-cli4中图片显示的问题实现的评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。