VUE为什么图片链接使用变量就显示不出来？

  • Z时代
  • 2024-03-12
  • 分类：IT

这样写就能显示

<swiper-slide v-for="(item,index) in currentList">
              <div class="item">
                <div class="box">
                  <img src="../../public/part1/part1/1.jpg" />
                </div>
              </div>
</swiper-slide>

下面这样写就显示不出来 baseUrl是../../public/part1/part1/路径，item是数组里面的文件名

<swiper-slide v-for="(item,index) in currentList">
              <div class="item">
                <div class="box">
                  <img :src="baseUrl+item" />
                </div>
              </div>
</swiper-slide>

我看控制台图片路径好像也没错 但是为什么显示不出来呢
VUE为什么图片链接使用变量就显示不出来？

回答：

你写成运行时通过变量定义，是无法获取到的
下面三种都可以
<img :src="baseUrl+item" />
require("../../asset/images/" + imgSrc);
require(../../asset/images/${imgName}.jpg);

回答：

图片路径错没错，在控制台 open('../../public/part1/part1/1.jpg') ，看能不能打开就知道了。
写成绝对路径： /path/to/pic.jpg应该就可以了，当然这个绝对路径也要以能 open 为准，具体要看项目的目录结构。

回答：

基于一楼的回答，改进写了一个demo,附上代码

<swiper-slide v-for="(item,index) in currentList">
              <div class="item">
                <div class="box">
                  <img :src="handleImgSrc(item)" />
                </div>
              </div>
</swiper-slide>
handleImgSrc(src) {
  return require(`../../public/part1/part1/${src}`);
}

如还有问题，可以再追问。看到会回。

回答：

你在template里面写的 src="../../public/part1/part1/1.jpg"
会被编译成 src="./img/1.jpg",你看到的是编译后的结果，是相对于dist文件夹的。
如果你写成:src="imgUrl",会被编译成一个指向性的地址，指向src="../../public/part1/part1/1.jpg",而这个地址在打包文件夹中是不存在的

如果你一定要这么写，除了楼上的方法外，你还有两个方法：
1.把图片放在public文件夹下 然后写成 /img/img1.jpg
2.使用网络图片

回答：

vue-cli在编译的时候会改变目录结构，所以可能拿不到图片，可以使用这几种：

  • 如三楼方式使用require，使用变量引入
  • src="@/..."
  • 放到public文件夹下使用相对路径引入src="/public/..."

回答：

对于SFCs vue,我们能在template|style中写图片的相对路径是vue-loader的功劳.

它会将

<img src="../image.jpg">

转换成 ⬇️

createElement('img', {
  attrs: {
    src: require('../image.jpg') // this is now a module request
  }
})

这里有一个转换规则：

  • 如果路径是绝对路径 (例如 /images/foo.jpg)，会原样保留。
  • 如果路径以 . 开头，将会被看作相对的模块依赖，并按照你的本地文件系统上的目录结构进行解析。

  • 如果路径以 ~ 开头，其后的部分将会被看作模块依赖。这意味着你可以用该特性来引用一个 Node 依赖中的资源：

    <img src="~some-npm-package/foo.jpg">
  • 如果路径以 @ 开头，也会被看作模块依赖。如果你的 webpack 配置中给 @ 配置了 alias，这就很有用了。所有 vue-cli 创建的项目都默认配置了将 @ 指向 /src。

所以我们可以根据这个，扩展到你的场景可以使用的方式。
所以，当出现循环这类的运行时变量，vue-loader是无法判断运行时变量的。最简单就是直接使用require('xxx'),直接让webpack去处理

或者就是借助于类似url-loader|copy-webpack-plugin的能力,我们将本地图片，直接复制（或者转成了base64）到打包后的dist（一般部署站点也是以dist作为根目录）文件，然后以上文中绝对路径的使用方式。

以上是 VUE为什么图片链接使用变量就显示不出来？ 的全部内容， 来源链接： utcz.com/p/935598.html

回到顶部