在vue中的js部分导入图片后通过webpack无法被正确打包的问题

具体描述在vue组件的js部分导入图片要使用require的形式导入，否则webpack不能正常导入，因为其路径不符合其解析规范原因在引入图片的时候的地址数据的时候需要使用require来讲图片作为模块引入，这样才会被webpack正确的打包的项目文件中，否则会因为webpack根据依赖打包而找不到指定的图片如果是在HTML中的img中通过v-bind引入引入图片,src为对应的数据变量的话

RotatingBlock

3969人浏览 · 2017-12-30 15:10:10

RotatingBlock · 2017-12-30 15:10:10 发布

具体描述

在vue组件的js部分导入图片要使用require的形式导入，否则webpack不能正常导入，因为其路径不符合其解析规范

原因

在引入图片的时候的地址数据的时候需要使用require来讲图片作为模块引入，这样才会被webpack正确的打包的项目文件中，否则会因为webpack根据依赖打包而找不到指定的图片
如果是在HTML中的img中通过v-bind引入引入图片,src为对应的数据变量的话也是需要使用require来将图片作为模块引入才会被webpack正常打包
在HTML中直接书写的img地址以及css中引入的图片地址无需使用其他手段正常引用即可被webpack正常打包

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^