动态导入图片

  • 起因:动态图片会自动拼接根路径,为了方便图片要放在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>
相关推荐
Mintopia几秒前
🤖 微服务架构下 WebAI 服务的高可用技术设计
前端·javascript·aigc
江城开朗的豌豆15 分钟前
React 跨级组件通信:避开 Context 的那些坑,我还有更好的选择!
前端·javascript·react.js
吃饺子不吃馅1 小时前
root.render(<App />)之后 React 干了哪些事?
前端·javascript·面试
鹏多多1 小时前
基于Vue3+TS的自定义指令开发与业务场景应用
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Redux 与 MobX:我的状态管理选择心路
前端·javascript·react.js
吃饺子不吃馅2 小时前
✨ 你知道吗?SVG 里藏了一个「任意门」——它就是 foreignObject! 🚪💫
前端·javascript·面试
gnip10 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
掘金安东尼12 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手16 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
Hilaku16 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css