vue-elementui 图片显示，本地图片路径访问方式，表格里边显示图片，动态加载图片。vue样式里边引用assets里边的图片

vue-elementui 图片显示

<el-image style="width: 32px; height: 32px" :src="src" :fit="fit" />

直接绑定一个地址即可：@表示src的路径，有时候路径太长这样使用方便一点

const state = reactive({
      previewUrl: "",
      //图片的地址。需要加上require函数，直接给地址是不行的
      src: require("@/assets/fileimgs/jpg.png"), 
      listLoading: true
    })

图片是本地的图片位置在：

也可以在图片显示的时候直接给地址：
但是要注意src前面也要写冒号，里边也要使用require方法不能直接给地址

<el-image style="width: 32px; height: 32px" :src="require('../../assets/fileimgs/jpg.png')" :fit="fit" />

地址里边也可以使用@作为路径

<el-image style="width: 32px; height: 32px" :src="require('@/assets/fileimgs/jpg.png')" :fit="fit" />

如果是图片地址是动态的在后面拼接就行了：
注意不能把动态变量整体作为require里边的参数，require中不能直接用变量

<el-image style="width: 32px; height: 32px" :src="require('../../assets/fileimgs/'+'pdf.png')" :fit="fit" />

img标签也是可以直接这样使用的

<img :src="require('@/assets/imgs/labroom/'+titleImgs[rType])">

这里是根据不同的类型来显示不同的图片，图片类型数组的定义：

data() {
  return {
    titleImgs: {
      '0': 'course-video-1.png',
      '1': 'course-video-1.png',
      '2': 'rar.png',
      '3': 'course-exam-paper.png',
      '4': 'course-courseware.png',
      '5': 'course-exp.png'
    },

这样拼接方法也是可以的

<img
    :src="require('@/assets/img/useData/' + parseImg(99))"
    class="tag_img"
    style=""
    alt=""
/>

parseImg是一个方法：

parseImg(_pr) {
    if (_pr >= 90) {
    return "excellent.png";
    } 
    else if (_pr >= 80) {
    return "good.png";
    } 
    else if (_pr >= 70) {
    return "average.png";
    } 
    else {
    return "poor.png";
    }
},

vue样式里边引用assets里边的图片

也不能直接给路径，要使用require函数，要拼接一下。最后编译出来地址是static的地址，应该直接把图片放到static直接给路径也是可以的

<div :style="'background-image: url('+require('@/assets/imgs/labroom/backgroundimg/bacimg1.png')+')'" style="width: 177px;height:68px;background-size: cover;"/>

方法二：写到样式文件里边

.bgimg{
    width: 60px;
    height: 60px;
    /*以下两种路径方式都可以*/
    /*background-image: url('../../../../assets/images/logo.png');*/
    background-image: url('~@/assets/images/logo.png');
    background-size: cover
  }

方法三：绑定的方式

<div :style="{backgroundImage: 'url(' + imgData + ')' }"></div>

<script>
import logo from '@/assets/images/logo.png'
export default {
  data() {
    return {
      imgData: logo 
    }
  }
}
</script>

表格里边显示图片

其实也是一个道理弄一个模板就行了

<el-table-column label="图标" width="66" >
        <template  #default="{ row }">
          <div style="display: flex; align-items: center;text-align: center;">
            <el-image style="width: 32px; height: 32px" :src="src" :fit="fit" />
          </div>
        </template>
      </el-table-column>

在表格里边加载动态图片

<el-table-column label="图标" width="66">
        <template #default="{ row }">
          <div style="display: flex; align-items: center;text-align: center;">
            <el-image style="width: 32px; height: 32px" :src="require('../../assets/fileimgs/'+row.fileTypeImg)" :fit="fit" />
          </div>
        </template>
      </el-table-column>

图片路径也可以这样写：

 <el-image style="width: 26px; height: 26px" :src="require('@/assets/img/analyseTrend/'+row.levelTypeImg)" />

效果如下：

直接引用静态资源里边的图片

首先把图片放到根目录下的static文件夹里边

然后就可以直接使用了：

background: #f5f5f5 url('../../../static/img/chatimg/bg.jpg') no-repeat center;

注意一下路径就行