`vue`列表渲染时的图片路径问题vue列表渲染时的图片路径问题

vue

列表渲染时的图片路径问题

为了能动态显示图片，需要为

src

属性添加

：

变为动态属性。

问题：

但是

webpack

在编译打包时对

src

的静态地址与动态地址的处理方式不同。

如果是静态路径（不带冒号），

webpack

将会通过

vueloader

来进行图片 路径的二次处理 。 如果是动态路径（带冒号），

webpack

将原封不动的把路径设置为最终的

src

。

Vueloader

对请求资源

URL

的处理规则：

1. 如果静态路径为绝对路径（

   src='/assets/a.jpg'

   ），则

   vueloader

   不会对路径进行任何处理。
2. 如果静态路径为相对路径（

   src='../assets/a.jpg'

   ），则

   vueloader

   将会把该图片当做模块资源，并且把它们统一管理（重命名后放入

   /img/

   下），并且修改

   src

   为

   (src='/img/a.xxxxx.jpg')

vueloader

处理图片路径的方式： 例如：

假如

<template>

中有如下代码：

vueloader

将会执行下列代码，修改

img

的

src

：

let newurl = require('../assets/a.jpg')
newurl ==>   '/img/a.24234.jpg'
           

解决方法：

提前图片文件当作是模块进行加载

整理图片时，对图片路径为

null

的文章进行筛选

this.articles.forEach(item=>{
    // 把图片路径经过require处理
    // 从而获取新的图片资源地址
    if(item.image!=null){
        item.image = require(
            '../assets/articles/'+item.image)
    }
})