vue render 中 如何正确加载img的src 路径？

 

这个问题我想有好多人可能遇到过，我在网上尽然没有找到相关的答案，再次我就分享一下我去如何解决vue render 中 如何正确配置img的src 路径？

 

解决方法

 

1.一般情况下我们本地图片会放在assets文件夹下，如下图所示：

 

 

在代码中我们是这样正确的使用：

 

在这里你也许会很闷逼，../../../../assets  这是什么鬼，在这里给大家看一张图，你就会瞬间明白，如下图所示：

 

因为我们要在AccessoryDemand.vue中操作本地图片，AccessoryDemand.vue在上图 1,2,3，4四层目录下所以要使用../../../../。

那么来到我们的主题上，vue render 中 如何正确配置img的src 路径？我还继续是如上代码那样的配置，代码如下：

 

  render: (h, params) => {
                            const row = params.row;
                            if (params.row.de_file_type == 1) {
                                return h('div', [
                                    h('img', {
                                        style: {
                                            width: "30px",
                                            verticalAlign: "middle"
                                        },
                                        attrs: {
                                            src: '../../../../assets/images/docx.png'
                                        }
                                    },)
                                ]);
                            } 

                        }

但是图片加载不出来啊！！！我就百度，没搜到想要的答案，最后想......assets与static的区别？？

 

相同点：资源在html中使用，都是可以的。

不同点：使用assets下面的资源，在js中使用的话，路径要经过webpack中file-loader编译，路径不能直接写。

assets中的文件会经过webpack打包，重新编译，推荐该方式。而static中的文件，不会经过编译。项目在经过打包后，会生成dist文件夹，static中的文件只是复制一遍而已。简单来说，static中建议放一些外部第三方，自己的放到assets，别人的放到static中。

注意：如果把图片放在assets与static中，html页面可以使用；但在动态绑定中，assets路径的图片会加载失败，因为webpack使用的是commenJS规范，必须使用require才可以，具体参考：

文章来源：https://blog.csdn.net/qq_41115965/article/details/80796211

 

到此我们的问题就可以解决了。

 

 

2.在这里我们说的是，vue render 中 如何正确配置img的src 路径？

 

代码：

   render: (h, params) => {
                            const row = params.row;
                            if (params.row.de_file_type == 1) {
                                return h('div', [
                                    h('img', {
                                        style: {
                                            width: "30px",
                                            verticalAlign: "middle"
                                        },
                                        attrs: {
                                            src: '../../../../static/images/docx.png'
                                        }
                                    },)
                                ]);
                            } 

                        }

 

图片放在static/images文件下。

 

原文链接：https://mp.csdn.net/postedit/81450529