el-image里面调用assets静态图片资源

最新推荐文章于 2024-05-29 17:42:33 发布

??or??

最新推荐文章于 2024-05-29 17:42:33 发布

阅读量817

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/zhangyr_student/article/details/136226456

版权

文章讲述了在Vue3框架配合Vite开发时，如何在HTML和JavaScript中正确使用require和import引入图片资源，以及两种方法的适用场景和注意事项。

摘要由CSDN通过智能技术生成

1. 使用require引入

<el-image :src="reuqire('assets/img/img1.png')"></el-image>

注：require在vue3+vite中不支持

2.import引入，具体写法有两种

// html部分
<el-image :src="img1">


// js部分
import img1 from '@/assets/img/registerTips/img1.png'

export default {
        setup() {
            return {
                img1 // vue3中一定要return
            }    
        }
}

// html部分
<el-image :src="getAssetsFile('../assets/img/img1.png')">

// js部分
export default {
  setup() {
        const getAssetsFile = (url) => {
            return new URL(url, import.meta.url).herf
        }

        return {
            getAssetsFile
        }
   }
}