vue 使用＜img src＞加载图片的解决办法

最近使用<img src = “”>加载图片时候,遇到很多问题,现记录一下

一.assets和static的路径区别

assets:在项目编译的过程中会被webpack处理解析为模块依赖，只支持相对路径的形式，如< img src=”./logo.png”>和background:url(./logo.png),
　
static：在这个目录下,文件不会被webpack处理,他会直接被复制到最终的打包目录(默认是dist/static)下。必须使用绝对路径引用这些文件，任何放在static/中文件需要以绝对路径的形式引用：/static[filename]

所以基于这个区别,引用的路径如下:

1. assets

 <img src="@/assets/img/user-getm.png" alt="">
 <img :src="require('@/assets/img/user-getm.png')" alt="">

2. static

 <img src="/static/img/favicon.ico">

二. Vue is returning [object Module] to img src

在加载图片时候遇见报错Vue is returning [object Module] to img src,然后无法加载出来图片,代码如下:

 <img :src="getImgUrl(imgName)" alt="">

methods: {
    getImgUrl: imgName => {
      let urlName = imgName.replace(/\s/g, '')
      return require(`@/assets/images/${urlName}.png`)
    }
}

发现报错是object,代表src接收到的不是一个路径.

产生的原因:
require 是 CommonJS 的模块导入方式，不支持模块的默认导出，因此img导入的结果其实是一个含 default 属性的对象

解决方法:
了解产生的原因,就有对应方法来解决:

一.使用.default接受default属性.(自用的方法)

You can access the image url in the [object Module] using the dot notation to access the default property.

 <img :src="getImgUrl(imgName)" alt="">

methods: {
    getImgUrl: imgName => {
      let urlName = imgName.replace(/\s/g, '')
      return require(`@/assets/images/${urlName}.png`).default
    }
}

二. 使用import方法(参考链接)

也可以使用 ES6 的 import 语句，如果使用 import，需要给定一个变量名，所有 import语句必须统一放在模块的开头。

import imgUrl from '@/assets/images/bg.png';
<img :src="imgUrl" alt="" />

三. ejs中引入图片

最近一个项目用的模版语言来写的,是.ejs文件,在这个文件里面使用img加载图片要记得使用<%= %>写法,对应刚开始写ejs的我太痛苦了.

<img src="<%= require('../assets/image/alert.svg') %>">