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

3131975015
  • 342

这样写就能显示

<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>

我看控制台图片路径好像也没错 但是为什么显示不出来呢

回复
阅读 629
6 个回答

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

图片路径错没错,在控制台 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.png">

转换成 ⬇️

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

这里有一个转换规则:

  • 如果路径是绝对路径 (例如 /images/foo.png),会原样保留。
  • 如果路径以 . 开头,将会被看作相对的模块依赖,并按照你的本地文件系统上的目录结构进行解析。
  • 如果路径以 ~ 开头,其后的部分将会被看作模块依赖。这意味着你可以用该特性来引用一个 Node 依赖中的资源:

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

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

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

你知道吗?

宣传栏