Vue 动态引入图片报错: Error in render: “Error: Cannot find module ‘./avatar.png‘“

问题原因

图片路径是一个变量, 要使用 require 引入图片.

正常在页面引入 图片是可以正常显示, 路径是被 loader 处理过的

正常页面路径引入

Vue 动态引入图片报错: Error in render: “Error: Cannot find module ‘./avatar.png‘“_第1张图片

使用变量

在这里插入图片描述
上面两种方法都是正常显示.
Vue 动态引入图片报错: Error in render: “Error: Cannot find module ‘./avatar.png‘“_第2张图片

如果根据数据来引入图片就会出现问题
模拟 变量<这个变量是相对路径>引入

我把这个变量放到 created 声明周期中演示一下
在这里插入图片描述
这个时候页面就会报错

报错原因: require 里面必须是一个路径, 现在变量是字符串格式.

Vue 动态引入图片报错: Error in render: “Error: Cannot find module ‘./avatar.png‘“_第3张图片

正确的引入方式

图片变量不使用 路径, 而使用图片的名称
require 路径使用拼接的方式, 前面使用图片文件夹路径, 后面拼接图片名称. 和后缀
在这里插入图片描述
Vue 动态引入图片报错: Error in render: “Error: Cannot find module ‘./avatar.png‘“_第4张图片

你可能感兴趣的:(Vue,vue,html,image)