Vue3动态加载图片指南-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_23926575/article/details/123951562

本文介绍了在Vue3中如何使用Composition API动态引入并显示图片。针对子组件接收父组件传递的图片路径时遇到的问题，文章详细阐述了由于webpack打包导致的图片路径问题，并提供了错误示例与正确的解决方案，强调require导入时需对路径进行拼接，不能直接使用变量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

技术方案

Vue3+Composition API

场景

在子组件中需要将父组件传入的图片路径赋给img标签，对图片进行显示。为便于子组件复用，图片路径需动态传入，不可在子组件中写死。

问题

若在setup函数中直接return imgSrcUrl，并在template img标签中引入的话，会导致无法显示图片即找不到文件所在路径，与webpack打包静态资源的方式有关系。

<template>
  <div>
    <img  :src="userImgSrc">
  </div>
</template>
<script>
  export default {
    name: 'Profile',
    props: {

    },
    setup(props, context) {
      let userImgSrc = '../../assets/images/test.jpg';
      return {
        userImgSrc
      }
    },
  }
</script>

解决方案

按照下述方式，使用require将图片导入，但需注意，require中需对路径进行拼接，不可直接传入变量，否则无法解析。

错误示例：

let url = '../../assets/mages/test.jpg';
let userImgSrc = require(url);

正确完整示例：

<template>
  <div>
    <img  :src="userImgSrc">
  </div>
</template>
<script>
  export default {
    name: 'Profile',
    props: {

    },
    setup(props, context) {
      let url = 'images/test.jpg'
      let userImgSrc = require('../../assets/' + url);
      return {
        userImgSrc
      }
    },
  }
</script>
<style lang="scss" scoped>
</style>