先看产品需求，如下图所示。

产品要求图片与其名称一一对应，这原本是一个很简单的要求。后台可以直接返回图片路径和名称，前台可以直接读取。但是我们没有存储图片的服务器，是实验性的需求，所以图片需要存储在前台。当时我以为vue中img的src可以动态绑定到一个变量。很简单吗？我没有想太多，直接开始做。

首先，结合背景讨论数据结构。因为图片要和名字一一对应，背景要返回中英文名字的映射。我把前景的图片名称直接设置为背景给出的英文名称，这样就可以读懂图片了，与中文名称一一对应。数据结构如下：映射关系用对象表示，图片多，所以放入数组

[{CnName:' Lotus '，enname:' Lotus'}，{cnname3360 '康乃馨' }，{CnName: '牡丹'，enname: '牡丹' }]现在前台使用vue-cli。创建一个新的文件夹，叫做vue-img，然后在这个文件夹中创建新的两个文件夹，客户端，服务器，客户端代表客户端代码，服务器代表服务器代码。在客户端文件夹中，打开命令窗口并执行vue init webpack-simple。后面的点表示当前文件夹。为简单起见，简单模板。此处使用服务器文件夹。打开命令窗口，首先执行npm init初始化到节点项目，然后npm install express cors - save，安装dependency，cors解决跨域。

先写前端代码，清空app.vue中的模板和脚本，保留其css样式内容，这样就不用写样式了。首页有两个部分，一个是按钮，用来发送请求，另一个是图片显示区，使用v-for循环。模板内容如下

Div id=' app '按钮@ click=' getflower '单击加载请求/按钮！-当时认为src绑定到一个变量是理所当然的，所以设置了一个默认变量。这是一个错误过程-ul Li v-for=' item in flowers ' : key=' item ' img 3360 src=' http : default mg ' alt=' flowers ' p { { item } }/p/Li/ul/div/Template因为方法getFlower以及变量default mg和flowers在模板中使用，所以应该在脚本中声明它们。DefaultImg是图片，应该介绍一下。在src目录中创建新的img文件夹，放一些图片。花是一个数组。我提前写了一首['荷花'，'康乃馨']和getFlower。因为没有背景，所以没有先写。请注意，如果有大量数据和复杂的交互，就需要编写模拟数据，但这里很简单。这也是出错的原因。代码如下

从“”导入默认值。/img/lotus . jpg '；//导入图片导出默认{data () {return {flowers : ['莲花'，'康乃馨']，defaultImg : defaultImg }；}，methods : { GetFlow(){ } } }；整个页面如下图，我以为没有问题。

现在写后台代码，用express写后台界面都很简单了。在server文件夹中，创建一个文件server.js来编写后台代码

var express=require(' express ')；var CORS=require(' CORS ')；//引入cors中间件解决跨域var app=express()；app . use(CORS())；//前端发送get请求，接口为flowers。返回的数据代码表示成功或失败，obj表示数据//Cn表示中文名，en表示中文名app.get ('/flowers '，(req，RES)={res.json ({code: 0 0，Obj: [{CnName:' lotus '，enname3360' lotus'}，{CnName: '康乃馨'，enname: ' nations ' }，{cnname: '牡丹'，enname : '牡丹' }。})现在用nodemon server.js启动服务，在浏览器地址输入http://localhost :3000/flowers，可以看到返回的数据表示界面正常。

现在重新重写前端代码，进行前端联调。由于发送请求，必须安装Axios依赖项。首先，根据后台界面更改模板内容的li

Ul Li v-for='花中之物' : key='物。enname ' img 3360 src=' http : item。enname' alt=' flowers' p {{item。cnname}}/p/Li/ul然后，将axios引入脚本。清除flowers数组，删除默认img，并引入背景数据所需的三张图片。同时，getFlower方法发送一个请求

//引入axios发送请求，默认设置后台请求地址从‘axios’导入axios；Axios。defaults . base URL=' http://localhost 33603000 '/导入相关图片，命名为与背景一致。从“”导入lotus。/img/lotus . jpg '；从'进口康乃馨。/img/康乃馨. jpg '；从‘’进口牡丹。/img/牡丹. jpg '；导出默认{ data(){ return { flowers 3360[]，荷花、康乃馨、牡丹}；}，methods : { GetFlow(){ axios . get('/flowers ')。然后(RES={ if(RES . status===200 RES . data . code===0){ this . flowers=RES . data . obj；} }) } }};我认为这是成功的。我点击按钮发送请求，但是我看到了下面的图片，但是没有图片

当时我想不通。img的src与变量绑定。不应该和defaultImg一样吗？打开浏览器控制台，看到以下内容。img的src已经是一个字符串，这不是我们想要的变量。

我想可能是它解析了item。EnName一次，把它变成一个字符串，然后就完成了。绑定变量意味着解析一次。就defalutImg而言，它是一个变量，所以不能再进行划分和解析，所以它会查找数据，如果找不到，就会报错。

所以我们现在需要做的是改变项目。EnName变成图片的地址，这样在解析的时候，我们就可以直接读取图片了。我们怎么做？当时我也不是很清楚，只是百度了一下，有人提到了require方法，require一个图片路径，我觉得是什么require，我之前从来没有听说过关键字require。思考了一会儿，突然明白了require是commonJs规范中的一个关键字，在编写节点代码的时候，总是要读取资源。在前端js中，我总是使用import，但是我直接忘记了。不知道怎么用。webpack将img视为一种资源，因此应该在使用之前引入它。导入有两种方式，一种是import，另一种是require，因为webpack同时支持ES6模块和commonJs规范。import是一个语句，只能用在js代码的顶部，但是require不同，它是一个表达式，可以执行赋值操作。让我们试试用require引入图片的效果。写好脚本标签后，记下

var img=require('。/img/lotus . jpg ')；console . log(img)；刷新浏览器，您可以在控制台上看到以下输出

这只是画面的路径，正是我们想要的。正如我刚才所说，require是一个表达式，可以在任何可以使用js表达式的地方使用。此时此刻，我想重新组装从后台返回的代码。EnName直接就是图片路径。getFlower方法修改如下

getFlower(){ axios . get('/flowers ')。然后(RES={ if(RES . status===200 RES . data . code===0){ this。flowers=RES . data . obj . map(item={ return { cnname 3360 item . cnname，enname3360 require(`。/img/$ { item . enname } . jpg `)//使用require介绍图片并获取图片路径}})})

这时我又想，既然require是一个表达式，js表达式可以直接在模板中解析，那么直接把img的src绑定到require表达式就可以了，getFlower方法回滚到前面的代码，然后模板代码如下

Ul Li v-for='花中之物' : key='物。enname ' img 3360 src=' http 3360 require(`。/img/$ {item。enname } . jpg `)alt=' flowers ' p { { item。cnname}}/。

最后写代码的时候发现如果读取的图片不存在，上面的方法会报错，没有办法处理。此时，我们应该返回到js代码处理。我将html代码返回到前面的代码，然后在getFlower方法中处理了这个错误。自从报告了读取错误，我们读取的代码就被投入了尝试。如果有错误，我们查看catch并提供一个默认图片，try catch处理了读取异常。试捕的逻辑

尝试{ img=require(`。/img/${item。EnName } . jpg `)；} catch (err) { img=require('。/img/lotus . jpg ')；}整个app.vue

模板div id=' app '按钮@ click=' getflower '单击加载请求/按钮ul Li v-for=' flowers中的项目' :key='项目。EnName ' img : src=' http : item。EnName ' alt=' flowers ' p { { item }。CnName } }/p/Li/ul/div/Templatescript//引入axios用于发送请求，默认设置后台请求地址从‘axios’导入axios；axios . defaults . BaseURl=' http://localhost :3000 '；导出默认值{ data(){ return { flowers 3360[]}；}，methods : { GetFlow(){ axios . get('/flowers ')。然后(RES={ if(RES . status===200 RES . data . code===0){ this . flowers=RES . data . obj . map(item={ var img=null；尝试{ img=require(`。/img/${item。EnName } . jpg `)；} catch (err) { img=require('。/img/lotus . jpg ')；}返回{ CnName:物品。CnName，enname : img } })} })} }；/script上面这篇解决vue的v-for循环中图片加载路径问题的文章是边肖和大家分享的全部内容。希望能给大家一个参考，支持我们。