【vue】less配置图片

Myth丶恋晨 2022-09-04 10:55 167阅读 0赞

# less配置图片 #

参考文章：[https://blog.csdn.net/qq\_39695266/article/details/107693890][https_blog.csdn.net_qq_39695266_article_details_107693890]

## 适用场景 ##

*  组件  
    比如项目组件都在一个文件夹下，然后组件内的图片也都放在一个文件夹下。这时候就可以把路径写做常量，然后其他组件内如果有图片，都可以按这个标准来写。  
    ![在这里插入图片描述][a12b8b4067044329b59d3fe85f36217f.png]  
    ![在这里插入图片描述][757b5937a8524bbc902ca468b97bed9b.png]

## 实现步骤 ##

首先，创建file.less文件；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3MxNDQxMTAxMjY1_size_16_color_FFFFFF_t_70]

其次，在页面里面先通过相对路径配好图片的地址；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3MxNDQxMTAxMjY1_size_16_color_FFFFFF_t_70 1]  
然后，把`../../../../public/img`这块路径复制到file.less的变量中；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3MxNDQxMTAxMjY1_size_16_color_FFFFFF_t_70 2]

最后，把页面中的图片地址替换为file.less中的变量。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3MxNDQxMTAxMjY1_size_16_color_FFFFFF_t_70 3]  
页面样式

![\#\# 操作结果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3MxNDQxMTAxMjY1_size_16_color_FFFFFF_t_70 4]

[https_blog.csdn.net_qq_39695266_article_details_107693890]: https://blog.csdn.net/qq_39695266/article/details/107693890
[a12b8b4067044329b59d3fe85f36217f.png]: /images/20220829/8f569f309af44c03896feda9091fda76.png
[757b5937a8524bbc902ca468b97bed9b.png]: /images/20220829/78c7c54a2fdc4c2ba7aa2013516a5818.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3MxNDQxMTAxMjY1_size_16_color_FFFFFF_t_70]: /images/20220829/e490df3a859749649094853e1987fea0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3MxNDQxMTAxMjY1_size_16_color_FFFFFF_t_70 1]: /images/20220829/581e436e77fc4a209cfbc605bf74015b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3MxNDQxMTAxMjY1_size_16_color_FFFFFF_t_70 2]: /images/20220829/4ee6c4f6698a4c0aa6a6ac00c64a04b1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3MxNDQxMTAxMjY1_size_16_color_FFFFFF_t_70 3]: /images/20220829/199e63de11164aa49ae4ed1257ebf9e4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3MxNDQxMTAxMjY1_size_16_color_FFFFFF_t_70 4]: /images/20220829/1cdd9af27f2b44a688a49fda3d2a1985.png