vu-element-ui img src 路径为assets 时加载动态图片失效的多种情况分析

最新推荐文章于 2024-02-22 10:39:26 发布
最新推荐文章于 2024-02-22 10:39:26 发布
阅读量1.5k 收藏
点赞数
分类专栏： vue小白炼成记 vue3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chpswg/article/details/109485321
版权

项目需要基于当前天气类别，显示对应的天气符号，为img的src属性绑定，其中图片放在目录assets下，发现以下几种情况

1）在代码中require必须用computed而不是method

如下图，在method getIcon1中，为src 绑定 method getIcon1，getIcon1通过require引入图片，测试无法获取图片

解决方法   是将method 变为computed计算属性，可以获取成功（既可以用相对路径也可以用绝对路径）

 

2）通过data引入时，必须在data

最低0.47元/天 解锁文章
cici_cmh
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
imgui显示图片
做一个快乐学习者
03-20 1万+
搞了半天终于会用imgui显示图片了，记录一下 #include <windows.h> #include <assert.h> #include <d3d9.h> #pragma comment(lib,"d3d9") #define STB_IMAGE_IMPLEMENTATION #include "stb_image.h" #define ST...
vue3 element plus 中el-image本地图片加载失败，路径问题
qq_43378240的博客
09-12 1861
src那里要用require包起来，这样就行了。
Vue elementUI 中 img标签的src属性动态绑定值
HKkkkkSky的博客
05-17 1479
场景描述：在用户的头像显示上，如果用户没有设置头像，使用系统默认的头像，如果设置了头像，则显示用户设置了的 代码示例： <img :src="userInfo.avatar === '' ? require('@/images/avatar.png') : require(userInfo.avatar) "> ...
vue+element-ui 动态加载本地图片
weixin_45552104的博客
08-01 2004
vue
Vue之assets图片加载不出来
weixin_52418790的博客
09-24 4857
说明 assets和static连个文件都是存放静态资源的目录 在html下使用它们是无差别的，但是在js中使用的话，assets中资源的路径要经过webpack中file-loader编译，不能直接写。 而static中的文件，不会经过编译，项目在经过打包后，会生成dist文件夹，static中的文件只是复制一遍而已。 二者中的图片资源，html页面可以直接使用；但在动态循环绑定中，assets路径的图片会加载失败，因为webpack使用的是commenJS规范，必须使用require才可以。 解决 一、
vue中img src 动态加载本地json的图片路径写法
10-17
需要注意的是，由于图片路径是在运行时动态加载的，所以我们需要使用`require`函数，并且路径前要加上别名`@/assets/img`，这里的`@`别名通常指向`src`目录。 如果图片路径是固定的，可以直接在`src`属性中写入图片...
vue src动态加载请求获取图片的方法
10-17
在Vue.js应用中，动态加载图片是一项常见的需求，特别是在处理用户上传或服务器返回的图片时。本篇文章将详细讲解如何在Vue中通过`src`属性动态加载本地图片和请求获取的图片。 一、加载本地图片 1. **图片目录...
基于vue 动态加载图片src的解决方法
08-28
基于vue 动态加载图片src的解决方法 一、 Vue 中的动态加载图片src问题 在 Vue 项目中，动态加载图片src是一个常见的问题。当我们使用 Vue 编写项目时，经常会遇到图片加载不出来的问题，特别是在使用 webpack ...
Nuxt v-bind绑定img src不显示的解决
01-21
如果你写成动态的，webpack就不会进行编译，原封不动的把’~/assets/img/home.png’ 放到你图片的src里面，’http://xxx.xxx.xxx/~/assets/i…’不存在这张图片！ 解决方法1： 把图片存在服务器，使用网络路径， ...
element-ui切换主题
11-01
总结，实现Vue+Element-UI的主题切换，主要涉及以下几个步骤：使用Element-UI主题生成器定制主题，将自定义主题引入项目，搭建Vuex状态管理，以及在用户操作时动态更新CSS。通过这种方式，你可以为用户提供个性化的...
el-image里面调用assets静态图片资源
最新发布
zhangyr的博客
02-22 782
注：require在vue3+vite中不支持。2.import引入，具体写法有两种。1. 使用require引入。
vue3+vite assets动态引入图片的方式
weixin_46406211的博客
12-08 1204
vite 官方默认的配置，如果资源文件在assets文件夹打包后会把图片名加上 hash值，但是直接通过 :src="imgSrc"方式引入并不会在打包的时候解析，导致开发环境可以正常引入，打包后却不能显示的问题。
vue的图片src动态引入失败的解决办法
林钹渊的博客
10-26 6180
之前因为把图片放在assets里面，所以图片地址正确了但是怎么都不显示。 要了解为什么先了解一下assets和static的区别 assets中的文件会经过webpack打包，重新编译，推荐该方式。而static中的文件，不会经过编译。项目在经过打包后，会生成dist文件夹，static中的文件只是复制一遍而已。简单来说，static中建议放一些外部第三方，自己的放到assets，别人的放到s...
vue3+vite assets动态引入图片的几种方式，解决打包后图片路径错误不显示的问题
热门推荐
LoveSummer
07-21 7万+
vite官方默认的配置，如果资源文件在assets文件夹打包后会把图片名加上hash值，但是直接通过src="imgSrc"方式引入并不会在打包的时候解析，导致开发环境可以正常引入，打包后却不能显示的问题我们看到实际上我们不希望资源文件被wbpack编译，这点跟webpack是一致的我们的目标静态文件在。......
img图片的src分别在vue2、vue3项目中如何动态赋值？
qq_41238459的博客
12-21 3254
浅谈img图片src在vue2、vue3项目中动态赋值问题
Vue3+ElementPlus，image动态更新src
y523648的博客
11-24 885
不知道为什么不能直接修改ImageUrl。修改为target.src，解决问题。
vue css 引入asstes中的图片 无法显示的几种解决方案
nian_cj的博客
03-14 6061
这里主要针对的是vuecli2中的一些问题。 vue项目中，常常会有很多的图片资源，这样的资源存放位置，通常我们有两个选择：1. static，2. assets 关于这两者之间的区别，和如何选择这里就不多说了！ 这里我们来说说assets目录下存放图片时，在vue组件的css样式中引入图片时将会遇到的一些问题！ 正常情况，我们在本地开发调试的时候，无论什么样的方式引入图片都不会有问题。但是，一大...
修改Element-UI样式的几种方式
Dax1_的博客
04-09 3111
1.新建全局样式表 新建global.css文件，并在main.js中引入。global.css文件一般都放在src/asset/style下 import "./assets/style/global.css" 在 global.css 文件中写的样式，无论在哪一个 vue 单页面都会覆盖 ElementUI 默认的样式。 2.在当前vue单页面中添加一个新的style标签 在当前的vue单页面的style标签后，添加一对新的style标签，新的style标签中不要添加scoped。在有scoped属性
vue+element-ui动态加载多个assets中以书籍id命名且与书籍id对应的图片
05-30
您好！针对您的问题，我理解您的需求是在使用 Vue 和 Element-UI 开发中，需要根据书籍 id 动态加载多个 assets 中以书籍 id 命名且与书籍 id 对应的图片。您可以按照以下步骤进行操作： 1. 在 Vue 组件中引入 Element-UI 中的 Upload 组件，并设置属性 action 为上传图片的接口地址。 2. 在接口中，将上传的图片保存到指定的文件夹中，并将图片的文件名设置为书籍 id。 3. 在 Vue 组件中使用 v-for 遍历书籍列表，并使用 v-bind:src 绑定书籍对应的图片地址。 4. 在绑定图片地址时，使用 require 动态加载图片，代码如下： ```javascript <img v-bind:src="require(`@/assets/${book.id}.jpg`)"> ``` 其中，`@/assets/` 是指 assets 文件夹的路径，`${book.id}.jpg` 是指书籍对应的图片文件名。 通过这样的方式，您可以根据书籍 id 动态加载多个 assets 中以书籍 id 命名且与书籍 id 对应的图片。希望这个解答能够对您有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值