vue + element-ui dynamic loading local images

Photo Gallery implementing recently with element-ui, made the first local pictures can not be loaded, the start is so written

<el-image
    class="table-td-thumb"
    :src="'../../assets/img/coca.jpg"
></el-image>

Directory structure is as follows

Local load

It was found wrong, load out, a check data, the original local picture to use require to load, then change the code below

<el-image
    class="table-td-thumb"
    :src="'require(../../assets/img/coca.jpg)'"
></el-image>

Sure enough, the success of the load

Dynamic loading

But I want to dynamic loading, so choose the path to the image on the database, the database load data into a variable and then call in the assembly

<template slot-scope="scope">
        <el-image
          class="table-td-thumb"
          :src="require(scope.row.img)"
        ></el-image>
</template>

The result is wrong, image loading out, so he checked a lot of information, the original can not require the direct use of variables, which can be a difficult task, followed by another check a lot of data and found that so write on the line.

<template slot-scope="scope">
        <el-image
          class="table-td-thumb"
          :src="require('../../assets/img/'+scope.row.img+'.jpg')"
        ></el-image>
</template>

The before and after the file name as a string concatenation variable, rather than directly to do with the variable parameters require, so no problem.

View larger image

After the success I want to use the preview-src-list to achieve a larger view effect, directly as written above was wrong, later found to be a plus in square brackets, as follows

<template slot-scope="scope">
        <el-image
          class="table-td-thumb"
          :src="require('../../assets/img/'+scope.row.img+'.jpg')"
          :preview-src-list="[require('../../assets/img/'+scope.row.img+'.jpg')]"
        ></el-image>
</template>