vue3 图片动态绑定

解决Vue3图片动态引入问题

vue3 动态(:src)绑定img图片

图片路径正确却无法显示，不使用绑定变量可以正常显示而使用后却无法显示

定义了一个名为images的响应式数组，用来存储图片的地址。currentIndex是一个响应式变量，用于跟踪当前应该显示哪张图片的索引。

vue3 使用v-bind动态绑定img src属性 build打包后 dist文件内不显示该图片。图片是在行内引入的 图片格式时.svg。

1 把图片放到src同级的static目录 “` data() { return { mysrc:‘/static/icon/icon.png’ } } 2 用require加载 data() { return { mysrc:require(“../icon/icon.png”

1、给img src绑定一个变量： <img :src="imgPath" /> 2、 require路径： <script> export default { data() { return { imaPath: require('.././xxx/xxx/xxx.png'), }; }, }; </script> //记录成长，仅此，仅此而已。 ...

1. 动态照片的渲染，在vite中，不能直接通过:src="item.image"的方式获取到照片， 2. 封装getAssetURL()函数，实现动态加载照片

Vue3 用src动态引入本地图片

我现在需要动态引入图片，因此要用到和动态绑定。但此时，控制台就报了一个错，说没有找到这张图片。但我图片明明就放在那儿，你还说没找到。这时一顿百度，没有找到结果。只能去，没想到竟然被我找到解决方法了。

如下图，意思为给父组件给子组件传递了一个叫做titile的prop，类型为字符串，值为xxxx。这样以来，我们就可以在子组件中接受这个值，并使用他。①获取了父组件传递的url字符串，使用如下代码将其转化为路径地址，URL()中第一个参数为url字符串，第二个参数为固定值。那么可以得出，下图即为父组件给子组件传递了一个本地照片的地址,其路径为assets文件夹下的bg.png图片。然而这样行不通的，原因很简单，父组件传入的url是一个字符串，子组件需要将其转化为路径地址只后才能应用。这样所有操作就完成了。

【代码】vue3-vite给img标签的src动态绑定图片路径。

在vue3项目中发现img标签的src路径如果是本地磁盘的路径会导致图片加载不出来 <template> <h1>图片</h1> <img src="E:\系统默认\桌面\bg.png" alt="" /> </template> <script lang="ts"> import { defineComponent } from '@vue/runtime-core'; export default defineCompo

我的写法如下： <img :scr="imgUrl"> ... data(){ return { imgUrl: '@/assets/images/office1.jpg' //报错 404 } } 原因： 在webpack中会将assets下的图片当做模块来用，因为是动态加载的，所以url-loader将无法解析图片地址，然后npm run dev 或者npm run build之后导致路径没有被加工【被webpack解析到的路径都会被解析为static/img/[filena

【代码】关于VUE3中动态绑定img标签的src属性的问题。

//直接写路径 <img src="@/assets/logo.png" alt=""> //绑定： <img src="@/assets/logo.png" alt=""> background: url('~@/assets/images/quanbg.png') no-repeat center; <li v-for ="item in images" :key="i"> <img :src="item" alt=""> &l..

动态在本地引入图片

【代码】vue 3 动态引入图片。