一般图片我们都在src下的assets文件夹下images下

html中我们这样使用没问题

  <img src="../../../../assets/images/know/_bji.png"style="width:24px;border-radius:5px;"/>
 //  ../../../../这个路径就根据自己在哪个文件中获取图片来自行写了

vue render配置img的src路径方法如下:

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

结果: 图片加载不出来,百度了下大多不是我想要的答案,最后是assets与static的区别

注意:如果把图片放在assets与static中,html页面可以使用;但在动态绑定中,assets路径的图片会加载失败,webpack使用的是commenJS规范,必须使用require才可以,具体参考:这里有更详细的解释

然后解决方法: 项目中img图片挪下位置放到static/images下

  render: (h, params) => {
     return h('div', [
            h('img', {
             style: {
                 width: "20px",
                 verticalAlign: "middle"
                },
             attrs: {
                 src: '../../../../static/images/docx.png'  
                    // 更改图片地址同步项目中的图片也要挪位置
             }
         })
     ]);
 } 
Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐