动态导入图片

  • 起因:动态图片会自动拼接根路径,为了方便图片要放在public下
  • 解决:使用require引入图片资源
  • 注意:不能动态路径中使用require,如<img :src="require(.../assets/${item.imgUrl})" alt="" />{``{ item.title }}。在Vue CLI创建的项目中,Webpack默认会对require进行解析,但是在动态路径中使用require时,Webpack可能无法正确解析路径。
  • 正确:
javascript 复制代码
<template>
  <div class="box">
    <div v-for="item in dataList" :key="item.title">
      <img :src="getImage(item.imgUrl)" alt="" />{{ item.title }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [
        {
          imgUrl: "1jpeg.jpeg",
          title: "你好",
        },
        {
          imgUrl: "2jpeg.jpeg",
          title: "我不好",
        },
      ],
    };
  },
  methods: {
    getImage(imgUrl) {
      return require(`../assets/${imgUrl}`);
    },
  },
};
</script>
相关推荐
孤狼warrior2 小时前
爬虫进阶 JS逆向基础超详细,解锁加密数据
javascript·爬虫
前端炒粉2 小时前
18.矩阵置零(原地算法)
javascript·线性代数·算法·矩阵
listhi5203 小时前
利用React Hooks简化状态管理
前端·javascript·react.js
华仔啊3 小时前
这个Vue3旋转菜单组件让项目颜值提升200%!支持多种主题,拿来即用
前端·javascript·css
CsharpDev-奶豆哥4 小时前
JavaScript性能优化实战大纲
开发语言·javascript·性能优化
yume_sibai7 小时前
TS 常用内置方法
前端·javascript·typescript
新知图书7 小时前
ArkTS语言、基本组成与数据类型
前端·javascript·typescript
西西学代码7 小时前
Flutter---个人信息(1)---实现简单的UI
开发语言·javascript·flutter
嘗_8 小时前
手写自己的小型react
前端·javascript·react.js
zuo-yiran8 小时前
vue div标签可输入状态下实现数据双向绑定
前端·javascript·vue.js