当时想不通，img 的src 绑定的是变量，它和defaultImg 不应该是一样吗？打开浏览器控制台，看到如下内容，img 的src 已经是一个字符串，它不是我们想要的变量了。
我想这里可能是它对item.EnName进行了一次解析变成了字符串，就完事了，绑定变量，就是解析一次。而对于defalutImg 来说，它本来就是变量，无法再进行分割解析，所以它会去data 里面去找，如果找不到，才报错。
那么我们现在要做的就是把item.EnName 变成图片的地址，这样进行一次解析的时候，直接去读取图片。要怎么做到呢？当时 我也不是很清楚，就百度了一下，有人提到了require 方法， require 一个图片路径，我想require 什么，以前没有听说过require 这个关键字啊。想了一段时间，突然就明白了，require 是一个commonJs 规范的关键字，当我们在写node 代码的时候，都是有require 去读取资源的。在前端js 中，一直使用import，直接忘记了，不知道怎么用了。webpack 把img 当做一种资源，所以使用时要先引进。引进方式有两种，一种是import ， 一种是require， 因为webpack 同时支持ES6 module 和 commonJs 规范. import 是个语句，只能在js 代码顶部使用， 而require 不一样，它是一个表达式，可以进行赋值操作。我们试一下，用require 引入图片是怎么样的效果，在 script 标签时，写下
var img = require('./img/lotus.jpg'); console.log(img);
刷新浏览器，在控制台上可以看到如下输出
正好是图片的路径，也正是我们想要的内容，刚才也说了，require是一个表达式，它可以用到任何js 表达式能用到的地方。我这时就想，把后台返回的代码进行重新组装，EnName 直接是图片路径。getFlower 方法修改如下
getFlower() { axios.get('/flowers') .then(res => { if(res.status === 200 && res.data.code === 0) { this.flowers = res.data.obj.map(item => { return { CnName: item.CnName, EnName: require(`./img/${item.EnName}.jpg`) // 利用require 引入图片，获得图片路径 } }) } }) }
这时刷新浏览器，点击按钮发送请求，可以看到图片了并且一一对应， 成功了。
这时又一想，既然require 是一个表达式，在template模版中是直接可以解析js 表达式，那么直接把img 的src 绑定到require 表达式就可以了，把getFlower 方法，回退到上一次代码，然后template 代码如下
<ul> <li v-for ="item in flowers" :key="item.EnName"> <img :src="require(`./img/${item.EnName}.jpg`)" alt="flowers"> <p>{{item.CnName}}</p> </li> </ul>
同样也成功了。
最后写代码的时候发现，如果读取的图片不存在，上面的方法就会报错，并且没有办法处理。这时还要回到js 的代码处理。我又把html代码回到以前，然后在getFlower方法中进行错误处理，既然读取报错，我们读取的代码就放到try中， 如果有报错，就在catch 看处理，提供一个默认图片，try catch 处理读取异常。 try catch 的逻辑
try { img = require(`./img/${item.EnName}.jpg`); } catch (err) { img = require('./img/lotus.jpg'); }
整个app.vue
<template> <div> <button @click='getFlower'>点击加载请求</button> <ul> <li v-for ="item in flowers" :key="item.EnName"> <img :src="item.EnName" alt="flowers"> <p>{{item.CnName}}</p> </li> </ul> </div> </template> <script> // 引入axios，用于发送请求，defaults 设置后台请求地址 import axios from 'axios'; axios.defaults.baseURL = "http://localhost:3000"; export default { data() { return { flowers: [] }; }, methods: { getFlower() { axios.get('/flowers') .then(res => { if(res.status === 200 && res.data.code === 0) { this.flowers = res.data.obj.map(item => { var img = null; try { img = require(`./img/${item.EnName}.jpg`); } catch (err) { img = require('./img/lotus.jpg'); } return { CnName: item.CnName, EnName: img } }) } }) } } }; </script>
以上这篇解决vue的 v-for 循环中图片加载路径问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: