Vue.js 图片不显示 | 图片资引用 | img src 路径出错

最新推荐文章于 2024-08-18 16:14:02 发布

@一支烟的功夫

最新推荐文章于 2024-08-18 16:14:02 发布

阅读量3.3w

点赞数 6

分类专栏： js 文章标签： vuejs 图片不显示图片资源

本文链接：https://blog.csdn.net/wlonging/article/details/68068328

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

最近在Vue学习交流群里面发现很多小伙伴在想要在vue中显示图片，但是把图片写在data里面作为变量传到模板中的时候却发现图片出不了，以为是图片路径的问题，查了半天还是出不来。

解决方法

方案1：使用require将图片进入，写法如下

logo: require('../asset/admin/logo.png')

然后再模板中：

<img :src="logo">

就可以了。

方案2：把图片放在static文件夹中，如下

这里写图片描述

然后再data里面直接这样写

logo: '../static/images/logo.png'

就可以直接使用了。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

@一支烟的功夫

关注关注

6
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
Vue.js 图片不显示 | 图片资引用 | img src 路径出错

Vue.js 图片不显示 | 图片资引用 | img src 路径出错
复制链接

扫一扫

专栏目录

Vue中定义src在img标签使用时加载不出来

weixin_55800388的博客

06-20

786

-vue3的语法，vue2类似--> < template > < img :src = " " /> < script setup > import {const src = ref('图片路径')；--vue3的语法，vue2类似--> < template > < img :src = " " /> < script setup > import {const src = ref('图片路径')；

VUE 图片:src方式引用加载不出来

weixin_52063946的博客

09-07

2152

在 vue 项目中，用src的方式引入图片，刚开始是采用这种方法：但是图片加载不出来错误原因：图片被浏览器识别成了 text，而不是 jpg格式，所以显示不出来解决方法：用 require() 方法，直接传入图片编码 { id: "46", img: require("../../public/imgs/slider/slide-3.jpg"), }, 问题解决 ...

参与评论您还未登录，请先登录后发表或查看评论

vue3 快速入门 (三) : vue中的图片路径

朱豪凯的博客

07-17

1681

介绍在Vue3中，引用图片路径的3种方式

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

热门推荐

雾林小妖的博客

11-27

1万+

在VUE中，img中的src动态赋值的之后，无法显示图片出现404.以及VUE中通过require访问静态资源出现的Uncaught Error: cannot module ‘asstes/logo.png’问题。

vue :src图片不显示解决办法

SugarXiXixi的博客

11-17

5561

<el-carousel-item v-for="(item,index) in houseObj.imgList" :key="index"> <img :src="require('../../assets/image/'+item)" alt="" :size="400"> </el-carousel-item> 参考博客

解决Vue中动态src图片不显示

weixin_61945023的博客

07-21

4786

解决：Vue项目中动态绑定src图片不显示问题，需要加require（）

(vue):src图片不显示解决办法

nyf_unknow的博客

05-26

4850

2.把图片放在cdn上，把网络地址存在imgUrl里，然后直接去展示。3.图片放在assets文件夹，然后在data里面require进图片。1.把图片放在src同级的static文件夹下。

vue.js src图片显示不出来

m0_37817220的博客

12-17

988

图片能正常显示是因为经过webpack处理了，（src引用的资源变成了base64的）。这是因为vue-loader做了处理。用变量引用 var img = require(‘路径’)的方式引入资源 ...

解决vue v-for src 图片路径问题 404

10-16

本篇分享将详细讲解如何在Vue中使用v-for循环时正确设置图片src路径，以及如何处理图片资源加载失败的问题。首先，需要明白的是，在Vue中使用v-for指令时，图片资源的路径不能仅作为字符串处理，因为webpack在构建...

vue中当图片地址无效的时候,显示默认图片的方法

10-18

在上面的代码中，`:src="item.img"`是绑定图片源地址，`@error="imgError(item)"`表示当图片加载出错时调用`imgError`方法。在`imgError`方法中，通过`require`函数引入了默认图片，并将其路径赋值给`item.img`。 ...

vue3 - vite项目打包部署服务器上线后图片不显示并且路径中存在undefined字眼，本地开发环境下正常显示图像没任何问题，但build编译打包后上传到线上服务器后再打开就不显示了，路径有问题

最新发布

高级前端工程师

08-18

3770

vue3，vite，图片不显示，图像加载失败，打包后图片路径不对，前面多了一个undefined，本地没问题只要打包上线就报错，vue3 vite项目解决部署线上图片URL失效问题，使用本地图片打包后不显示，本地资源路径，本地图片图标，图标不显示，打包后图片失效的问题，访问图片/图标不显示的问题，vue3+vite打包后图片路径错误不显示，背景图打包之后访问路径错误问题的解决，打包部署到服务器上却显示路径undefined问题，图片url域名错误，导致无法显示，还是报错显示不了，如何解决，无效，还是不行，r

Vue中img的src是动态渲染时不显示的解决

10-15

今天小编就为大家分享一篇Vue中img的src是动态渲染时不显示的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

Vue中图片Src使用变量的方法

10-16

主要介绍了Vue中图片Src使用变量的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

解决vue打包之后静态资源图片失效的问题

11-27

html5 循环加载图片,解决vue的 v-for 循环中图片加载路径问题

weixin_39958248的博客

06-07

892

先看一下产品需求，如下图所示，产品要求图片和它的名称一一对应，本来是非常简单的需求，后台直接返回图片路径和名称，前台直接读取就可以了，但是我们没有存储图片的服务器，再加上是一个实验性的需求，图片需要存放到前台。当时我想，vue 中的img 的src 可以动态绑定到一个变量上，很简单吗，就没有考虑太多，直接开始做了。首先和后台商量一下数据结构，因为图片要和名称一一对应，所以后台要返回中英文的名称的...

vue动态src不显示图片的问题

qq_45781961的博客

12-05

3099

data(){ return{ weather_weatherimg:'../img/' //我的路径是这样 } } this.weather_weatherimg +=data.weatherimg;//拼接之后是../img/xxx.png 路径没有错误，但是图片并不显示出来。原因是图片不能被识别被编译。修改为在js数据中如何引用图片因为webpack会将图片当做模块来引用，所以在js中需要使用require将图片引用进来，不能直接以字符串的形式。 ...

Vue——Vue中本地图片src路径对但是图片不出来的问题

qq_43201350的博客

01-09

654

Vue——Vue中本地图片src路径对但是图片不出来的问题

Vue中本地图片src路径对但是图片不出来的问题

qq_32998295的博客

02-07

2780

Vue中本地图片src路径对但是图片不出来的问题

Vue.js 2.0 移动端拍照压缩图片上传预览功能实现

Vue.js 2.0 移动端拍照压缩图片上传预览功能本文将详细介绍 Vue.js 2.0 移动端拍照压缩图片上传预览功能的实现思路和关键技术点。 **拍照预览压缩上传流程** 在移动端开发中，拍照预览压缩上传功能是一个常见的...