el-image中src加载assets路径下图片使用require避免加载不到

比眉伴天荒 2023-09-30 10:36 7阅读 0赞

## 场景 ##

el-image中图片的数据源加载assets路径下的照片。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16][]

正确加载方式。

<el-image
            style="width: 732px; height: 48px"
            :src="require('@/assets/images/title.jpg')"
            ></el-image>

添加require以及@符号来加载。

图片路径

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/b15f3c36749f4e6e8f0f1433f48247d9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/30869c3b2aa9496e909e77803afcd767.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_20,color_FFFFFF,t_70,g_se,x_16

发表评论取消回复

表情：

评论列表（有 0 条评论，7人围观）

还没有评论，来说两句吧...

相关阅读

相关表格图片加载不出来，破图，加载失败

表格图片加载不出来，破图，加载失败一、如果用el-upload组件将图片上传至服务器 <template slot-scope="scope" slo...

ゝ一纸荒年。/ 2024年04月20日 08:26/ 0 赞/ 82 阅读

相关 el-image中src加载assets路径下图片使用require避免加载不到

场景 el-image中图片的数据源加载assets路径下的照片。 ![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1N

比眉伴天荒/ 2023年09月30日 10:36/ 0 赞/ 8 阅读

相关 vue项目中图片加载不到时，使用默认图片替换

vue项目中图片加载不到时，使用默认图片替换解决方法： ①使用三目运算符 ②使用onerror <img :src="item

我就是我/ 2023年07月24日 02:21/ 0 赞/ 11 阅读

相关 GitHub 图片加载不出来

打开路径 C:\\Windows\\System32\\drivers\\etc 下的 hosts 文件（记事本或者notpad++）在文件最后添加 \ GitHub S

妖狐艹你老母/ 2022年12月13日 04:28/ 0 赞/ 257 阅读

相关高效加载图片，避免OOM

在项目中加载图片是基本不可避免的，但是有时候加载的图片不一定是你所需要的大小，这时我们就要对图片进行缩放，使之能适应给出的大小。图像的显示是很占用内存的，若加载的方式不正确就很

灰太狼/ 2022年09月24日 00:23/ 0 赞/ 215 阅读

相关 require 按需加载css,如何使用requirejs加载css？

这是我的requirejs配置文件。我在基于角度的项目上使用require js。如果我可以用requirejs加载css，我也可以组织我的css文件！我是requirejs概

﹏ヽ暗。殇╰゛Y/ 2022年09月02日 14:56/ 0 赞/ 150 阅读

相关使用WebView加载assets下的html文件

有时候，我们需要将html文件以及所用到的图片都放在 assets/html/ 目录下。然后在页面上通过WebView来显示出来，比如给页面一个默认的显示，这样子看起来

落日映苍穹つ/ 2022年08月27日 05:47/ 0 赞/ 258 阅读

相关 WebView加载assets文件夹下的html

注：要在Manifest.xml注册访问网络权限  <uses-permission android:name="android

喜欢ヅ旅行/ 2022年06月08日 08:38/ 0 赞/ 518 阅读

相关图片加载

[Android四大图片缓存（Imageloader,Picasso,Glide,Fresco）原理、特性对比][Android_Imageloader_Picasso_Gl

川长思鸟来/ 2022年06月08日 07:30/ 0 赞/ 352 阅读

相关 js图片加载效果（延迟加载+瀑布流加载）

概述两种图片加载的效果：一种是遇到图片较多时，带读条效果的加载提示；另一种是根据滑块的位置进行预加载，用户不察觉的情况下，实现瀑布流的加载效果详细代码下载

痛定思痛。/ 2022年05月31日 08:57/ 0 赞/ 578 阅读