vue中使用图片的两种方式

会隐身的小圆子

已于 2022-06-30 16:46:00 修改

阅读量4k

点赞数

分类专栏： vue观察日记文章标签： vue.js 前端 javascript

于 2022-06-30 16:40:32 首次发布

本文链接：https://blog.csdn.net/weixin_61032994/article/details/125543047

版权

本文介绍了在Vue.js项目中，如何使用require和import两种方式导入并使用图片资源。通过代码示例展示了这两种方法，同时提到可以将图片路径处理逻辑放入methods中，以简化行内样式。

摘要由CSDN通过智能技术生成

文章目录

- 一、使用require导入图片
- 二、使用import导入图片

一、使用require导入图片

在这里插入图片描述

代码如下

<template>
  <div class="container">
    <div class="module" v-for="(item,index) in basicInfo" :key="index">
      <!-- 图片 -->
      <div class="bg" :style="{background:'url('+imgsUrl[index]+') no-repeat center',backgroundSize:'100%'}"></div>
      <!-- 车型 -->
      <div