动态导入图片

  • 起因:动态图片会自动拼接根路径,为了方便图片要放在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>
相关推荐
江城开朗的豌豆15 小时前
玩转小程序页面跳转:我的路由实战笔记
前端·javascript·微信小程序
前端 贾公子15 小时前
Vue 响应式高阶 API - effectScope
前端·javascript·vue.js
^O^ ^O^16 小时前
pc端pdf预览
前端·javascript·pdf
艾小码16 小时前
还在纠结用v-if还是v-show?看完这篇彻底搞懂Vue渲染机制!
javascript·vue.js
徐同保16 小时前
js class定义类,私有属性,类继承,子类访问父类的方法,重写父类的方法
前端·javascript·vue.js
@大迁世界1 天前
Vue 设计模式 实战指南
前端·javascript·vue.js·设计模式·ecmascript
jump_jump1 天前
妙用 localeCompare 获取汉字拼音首字母
前端·javascript·浏览器
U.2 SSD1 天前
Echarts单轴坐标系散点图
前端·javascript·echarts
不做无法实现的梦~1 天前
jetson刷系统之后没有浏览器--解决办法
开发语言·javascript·ecmascript
Jedi Hongbin1 天前
Three.js NodeMaterial 节点材质系统文档
前端·javascript·three.js·nodematerial