技术方案

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>