基于webpack的项目，动态添加图片

r囧r小猫 2022-05-24 05:34 41阅读 0赞

有些时候，有的图片没办法在html中直接写好，比如有10张图片，名字分别为 rank1.png、rank2.png......rank10.png，我们希望可以在一个循环中把它们添加进来，而不是手动写10次。

基本思路是下面这样：

<li class="list-item" v-for="(item, index) in rankList" :key="item.id">
        <img :src="'../imgs/rank' + (index+1) + '.png'">
        
    </li>

但是由于webpack在静态编译阶段就已经将图片打包了，上面这时样的写法使得图片路径在项目运行时才拼接完毕，会导致图片404。或者在js中添加的图片也会有这种问题。

为了解决这个问题，有两种方法：

1、把图片上传到服务器，直接用线上路径

2、可以用import或者require导入图片

import和require的区别在于，import必须写在代码开头，如果有10张图片，就要import10次；而require可以写在代码块中，用循环来完成图片引入。

<template>
    
    <li class="list-item" v-for="(item, index) in rankList" :key="item.id">
        <img :src="imgUrlList[index]">
        
    </li>
    
    </template>
    <script>
    var imgList = []
        for (let i = 0; i < 3; i++) {
        imgList.push(require('../imgs/rank' + (i + 1) + '.png'))
    }
    export default {
        data() {
            return {
                rankList: [
                    {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}
                ],
                imgUrlList: imgList
            }
        }
    }
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，41人围观）

还没有评论，来说两句吧...

相关阅读

相关 [cesium] 基于Webpack的Cesium项目搭建

装 1.下载nodejs并安装：[http://nodejs.cn/download/][http_nodejs.cn_download] 2. cesium - w...

╰半橙微兮°/ 2024年04月18日 19:42/ 0 赞/ 68 阅读

相关创建基于Webpack的Vue.js项目

创建基于Webpack的Vue.js项目本文目录：一、Webpack简介二、创建基于Webpack的Vue.js项目 1、前提条件（1）、检查node 和

旧城等待，/ 2024年03月25日 20:38/ 0 赞/ 40 阅读

相关 vue项目添加图片裁剪组件

vue项目添加图片裁剪组件功能如下图所示： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_tex

清疚/ 2022年12月28日 09:02/ 0 赞/ 268 阅读

相关 webpack压缩大图片之项目资源优化

> `webpack`打包时，会根据`webpack.config.js` 中`url-loader`中设置的limit大小来对图片进行处理，小于limit的图片转化成`bas

傷城~/ 2022年12月21日 12:56/ 0 赞/ 142 阅读

相关 webpack 项目使用--创建webpack 项目（1）

1.新建一个文件夹假设文件夹的名称为 wdgapp，并且通过命令行到该目录下 ![20210805204946585.png][] 2. 初始化项目 npm

喜欢ヅ旅行/ 2022年09月03日 05:19/ 0 赞/ 218 阅读

相关 webpack 处理图片

本文接续上一篇文章来写，请查看： [http://blog.csdn.net/hsl0530hsl/article/details/78490034][http_blog.

╰半橙微兮°/ 2022年06月05日 02:13/ 0 赞/ 187 阅读

相关基于webpack的项目，动态添加图片

有些时候，有的图片没办法在html中直接写好，比如有10张图片，名字分别为 rank1.png、rank2.png......rank10.png，我们希望可以在一个循环中把它

r囧r小猫/ 2022年05月24日 05:34/ 0 赞/ 42 阅读

相关基于webpack4搭建的react项目框架

介绍框架介绍，使用webpac构建的react单页面应用，集成antd。使用webpack-dev-server启动本地服务，加入热更新便于开发调试。使用bundle-

系统管理员/ 2022年05月21日 04:44/ 0 赞/ 201 阅读

相关 Java 添加PDF印章——图片印章、动态印章

图章（印章）是一种在合同、票据、公文等文件中表明法律效应、部门机关权威的重要指示物，常见于各种格式的文件、文档中。对于纸质文档可以手动盖章，但对于电子文档，则需要通过特定的方法

墨蓝/ 2021年12月15日 21:19/ 0 赞/ 679 阅读

相关 vue创建一个基于 webpack 模板的新项目

创建一个基于 webpack 模板的新项目要创建项目，首先我们要选定目录，然后再命令行中把目录转到选定的目录。可以使用： my-project为自定义项目名

以你之姓@/ 2021年09月15日 14:10/ 0 赞/ 301 阅读