VUE3语法--img图片不显示 img的src动态赋值图片显示_vue3 img src 动态赋值

最后

我可以将最近整理的前端面试题分享出来，其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等，还在持续整理更新中，希望大家都能找到心仪的工作。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

篇幅有限，仅展示部分截图：

常见情景2**：**针对上述的问题，我们有些人会使用require函数去设置程序，告诉VUE你加载资源的时候加载本地资源，这个时候回报错：VUE使用require报错：Uncaught Error: cannot module ‘asstes/logo.png’

2、常规的使用图片方式

1、

2、<img src=https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=%E2%80%9Dhttp%3A%2F%2F…%2F%2F2.png%E2%80%9D&pos_id=img-7ygxwZ8b-1715833160129) />

这种直接通过相对路径获取项目下的图片或者直接使用或传入网络资源是没有问题的。

3、期望使用动态的图片地址

案例说明：在vue中通过ref创建了一个响应式的参数imgUrl,图片的路径是asstes/logo.png，在template中img通过:src绑定使用了imgUrl，这个时候图片是无法显示的。

原因：vue没有将当前的图片信息当成是本地的静态资源处理，而是当成了网络资源处理，所以报错404找不到资源。

<template>
  <div>
    <img :src="imgUrl" alt="">
  </div>
</template>
<script>
import { ref } from 'vue'
export default {
  name: 'App',
  setup(){
    //简单数据的响应
    const imgUrl=ref('asstes/logo.png') 
    return {imgUrl}
  }
}
</script>

4、通过require解决上述问题

我们对上面的代码进行改造，告诉VUE你要加载本地的静态资源而不是网络资源

我们在img中的:src中加入了require,这个函数可以实现加载本地资源而给网络资源

但是这个有报错。

VUE使用require报错：Uncaught Error: cannot module ‘asstes/logo.png’

<template>
  <div>
    <img :src="require(imgUrl)" alt="">
  </div>
</template>
<script>
import { ref } from 'vue'
export default {
  name: 'App',
  setup(){
    //简单数据的响应
    const imgUrl=ref('asstes/logo.png') 
    return {imgUrl}
  }
}
</script>

4.1、问题分析+最终解决

结尾

正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。

以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

[外链图片转存中…(img-7INvnSOf-1715833137369)]