彻底搞懂并解决vue-cli4中图片显示的问题实现

2023-07-17 14:47:04 70

在基于vue-cli实际开发过程中，很多小伙伴都会遇到关于图片显示的困扰，不管怎么设置，图片就是显示不出来，今天我们来详细说说这个问题。

图片无法显示，绝大部门的情况是图片路径问题，要搞懂路径问题，分别有相对路径与绝对路径

实际开发中使用图片最多的场景有以下三种：

1、手动引入

使用require或import方式引入图片时，引入路径是相对于当前文件路径的，编译时webpack会介入并把路径处理成服务器绝路径

2、相对路径

在vue-cli中使用相对路径时，webpack会自动介入，上面的代码在编译时自动变成


最终在页面的显示效果与以上手动引入方式一致
3、绝对路径

使用绝对路径，首先要了解服务器根目录在哪，大家都知道，在vue-cli的项目本身自带一个服务器的，基于webpack-dev-server模块，根目录为public文件夹，所以，使用绝对路径的方式展示图片，必须把图片放到public文件夹，这也是最简单的一种方式，这种方式webpack不会介入，所以最终显示效果与引入时的代码一致，代码如下：


最终显示效果

4、数据中的图片


这种情况应该是最常见的（ajax请求数据回来，然后遍历写入到页面结构中），这个时候绑定到src属性的是一个变量，无法直接手动import或require，如果直接使用http://www.haoziyuan.ccimgurl属性中的路径，webpack不会介入处理，所以以上代码是无法正常显示图片的，解决方法如下：
方法1：遍历数据，使用前先手动require
在前端，模块的引入默认是不支持动态引入的（即不支持：require(变量)），如下
this.goodslist=this.goodslist.map(item=>{
//虽然路径是正确的，但以下方式引入会报`Cannotfindmodule'../assets/logo.png'`
//item.http://www.haoziyuan.ccimgurl=require(item.http://www.haoziyuan.ccimgurl);

//正确的方式为
item.http://www.haoziyuan.ccimgurl=require('../img'+item.http://www.haoziyuan.ccimgurl.replace('../img',''))
returnitem;
})
有小伙伴可能会觉得奇怪，为什么这样做就可以了，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=>{
constfn=require.context('../img',false,/^\./);
constfile=item.replace('../img','.')
item.http://www.haoziyuan.ccimgurl=fn(file);
returnitem;
})
方法2：在数据库端直接使用绝对路径，并把所需图片放到public目录中
http://www.haoziyuan.ccimgurl的格式为:'/img/goods1.png'
到此这篇关于彻底搞懂并解决vue-cli4中图片显示的问题实现的文章就介绍到这了,更多相关vue-cli4图片显示内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

彻底搞懂并解决vue-cli4中图片显示的问题实现

热门推荐

随机推荐