vue中循环拼接本地图片路径的问题（小马哥vue学习教程））

软件客栈（大掌柜）

于 2020-03-06 12:18:32 发布

阅读量1k

点赞数

分类专栏：前端 vue 文章标签： vue.js html html5 node.js es6

本文链接：https://blog.youkuaiyun.com/weixin_43105356/article/details/104693113

版权

前端同时被 2 个专栏收录

12 篇文章

订阅专栏

vue

8 篇文章

订阅专栏

本文详细解释了在使用Webpack构建商城个人首页时遇到的图标显示问题。主要原因是Webpack将本地图片路径作为字符串处理而非实际图片路径。文章提供了针对本地和网络图片的不同解决方案，帮助开发者正确配置图片资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、问题所在：做商城个人首页时候，图标显示不出来

在这里插入图片描述

二、解决办法

在这里插入图片描述
因为图片是本地路径的话，在webpack中他会被当成一个字符串来处理，并不会转换为图片的路径。

如果图片路径不是本地静态图片就不需要 require 啦，
如果是网络图片的话，直接拼接就行，就不需要再加require啦。

切记切记！
欢迎点击交流，非常感谢！

在这里<template>
    <div id="list">
      <div v-for="(item, index) in listData" :key="index" class="item">
        <span class="icon">
          <img :src=" require('assets/img/profile/' + item.icon)" alt="">
        </span>

        <div class="info">{{item.info}}</div>
      </div>
    </div>
</template>插入代码片

在这里插入图片描述