如何解决vue的v-for循环中图片加载路径问题-创新互联

[
  {
  CnName:'荷花',
  EnName: 'lotus'
  },
  {
  CnName:'康乃馨',
  EnName: 'carnations'
  },
  {
  CnName:'牡丹',
  EnName: 'peony'
  }
 ]

 点击加载请求
 
 

 
  
  
{{item}}
 
 

由于template中用到了方法 getFlower, 变量defaultImg 和 flowers， 所以要在script中进行声明。defaultImg 是一个图片，所以还要引入进来, 在src 目录中新建一个img文件夹，放几张图片。flowers是一个数组，我先预写了一个['荷花', '康乃馨']，getFlower，因为没有后台，所以先没有写， 注意如果数据量大的，交互复杂，是要写mock 数据的，这里比较简单就没有写。这也是出错的原因。代码如下

import defaultImg from './img/lotus.jpg'; // import 引入图片

export default {
 data() {
 return {
 flowers: ['荷花', '康乃馨'],
 defaultImg: defaultImg
 };
 },
 methods: {
 getFlower() {}
 }
};

整个页面显示如下，我以为没有问题了。

现在再来写后台代码， 用express 写一个后台接口，还是非常简单的。在server 文件夹中，建一个文件server.js 来写后台代码

var express = require('express');
var cors = require('cors'); // 引入cors 中间件，解决跨域

var app = express();
app.use(cors());

// 前端发送的是get请求，接口是flowers. 返回的数据code 表示成功或失败，obj 表示数据
// 数据中Cn 表示中文名称，En表示中文名称
app.get('/flowers', (req, res) => {
 res.json({
 code: 0,
 obj: [
  {
  CnName:'荷花',
  EnName: 'lotus'
  },
  {
  CnName:'康乃馨',
  EnName: 'carnations'
  },
  {
  CnName:'牡丹',
  EnName: 'peony'
  }
 ]
 })
})
app.listen(3000, () => {
 console.log('server start at 3000');
})

现在用nodemon server.js 启动服务，在浏览器地址输入http://localhost:3000/flowers， 可以看到返回的数据表示接口ok.

现在再重新写一下前端代码，进行前后端联调。由于要发送请求，还要安装axios 依赖。首先要根据后台接口改一下template 内容的li

 
  
  
{{item.CnName}}
 
 

然后，在script中引入 axios， flowers 数组清空，default img 删除 , 引入后台数据所需要的三张图片， 同时getFlower 方法发送请求

// 引入axios，用于发送请求，defaults 设置后台请求地址
import axios from 'axios';
axios.defaults.baseURL = "http://localhost:3000"

// 引入相关的图片, 命名要和后台保持一致
import lotus from './img/lotus.jpg';
import carnations from './img/carnations.jpg';
import peony from './img/peony.jpg';

export default {
 data() {
 return {
 flowers: [], 
 lotus,
 carnations,
 peony
 };
 },
 methods: {
 getFlower() {
 axios.get('/flowers')
 .then(res => {
  if(res.status === 200 && res.data.code === 0) {
  this.flowers = res.data.obj;
  }
 })
 }
 }
};

我以为成功了，点击按钮发送请求，但是看到的如下画面，没有图片

当时想不通，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 代码如下

 
  
  
{{item.CnName}}
 
 

同样也成功了。

最后写代码的时候发现，如果读取的图片不存在，上面的方法就会报错，并且没有办法处理。这时还要回到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

关于“如何解决vue的v-for循环中图片加载路径问题”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。