vue.js src图片显示不出来。

Question

为什么我的图片显示不出来

<template>

<div class="Div">

<div>

    <ul>
        
    <li v-for="item in list">
         <div class="divc"><img :src="item.img" alt=""></div>
         {{item.title}}
         <div class="adiv">
         <img :src="item.srci? '../../assets/喜欢.png':'../../assets/喜欢2.png'" @click="item.srci=!item.srci">
         </div>
         <div class="divh"></div>

    </li>
    </ul>
    </div>

    <daohang></daohang>
</div>

</template>
<script>

export default{
    data(){
return{
   //srci:'1'
   list:[
    {srci:true,img:'../../assets/1.jpg',title:'我的能量很少的，心也小小的'},
    {srci:true,img:'../../assets/2.jpg',title:'地球到星星没有捷径'},
    {srci:true,img:'../../assets/3.jpg',title:'没有一种爱不需要培养'},
    {srci:true,img:'../../assets/4.jpg',title:'有件事似乎已被我遗忘很久了'},
    {srci:true,img:'../../assets/5.jpg',title:'都是捕风，都是虚空'},
    ]

}

},

然后直接在img里加src="路径"，图片又能显示出来

<ul>

            <li><div class="divc"><img src="../../assets/1.jpg" alt=""></div>我的能量很少的，心也小小的<div class="adiv">
            <img src="../../assets/喜欢.png" alt="" name="btn" @click="onClick" v-if="srci==='1'"><img src="../../assets/喜欢2.png" @click="onClick" v-if="srci==='2'"></div></li>
            <li><div class="divh"></div></li>
            <li><div class="divc"><img src="../../assets/2.jpg" alt=""></div>地球到星星没有捷径<div class="adiv">
            <img src="../../assets/喜欢.png" alt="" name="btn" @click="onClick" v-if="srci==='1'"><img src="../../assets/喜欢2.png" @click="onClick" v-if="srci==='2'"></div></li>
            <li><div class="divh"></div></li>
            <li><div class="divc"><img src="../../assets/3.jpg" alt=""></div>没有一种爱不需要培养<div class="adiv">
            <img src="../../assets/喜欢.png" alt="" name="btn" @click="onClick" v-if="srci==='1'"><img src="../../assets/喜欢2.png" @click="onClick" v-if="srci==='2'"></div></li>
            <li><div class="divh"></div></li>
            <li><div class="divc"><img src="../../assets/4.jpg" alt=""></div>有件事似乎已被我遗忘很久了<div class="adiv">
            <img src="../../assets/喜欢.png" alt="" name="btn" @click="onClick" v-if="srci==='1'"><img src="../../assets/喜欢2.png" @click="onClick" v-if="srci==='2'"></div></li>
            <li><div class="divh"></div></li>
            <li class="divc2"><div class="divc"><img src="../../assets/5.jpg" alt=""></div>都是捕风，都是虚空<div class="adiv">
            <img src="../../assets/喜欢.png" alt="" name="btn" @click="onClick" v-if="srci==='1'"><img src="../../assets/喜欢2.png" @click="onClick" v-if="srci==='2'"></div></li>
        </ul>
        
        
        
        怎么改啊。为啥F12那里的src不一样。。

Answer 1

楼主，你好！
1，图片能正常显示是因为经过 webpack 处理了，从截图里也可以看出来（src 引用的资源变成了 base64 的）。这是因为 vue-loader 做了处理。可以参考官方文档，传送门。

2，图片不正常显示肯定是因为路径的问题，定义在 data 里也是可以的，但是要用 require 关键字，这样就可以经过 webpack 处理，效果是一样的。

---

如有帮助，麻烦点击下采纳，谢谢~

Answer 2

图片属于一个静态资源，而不只是路径，应该作为资源导入

没用过vue，我相信原理是差不多的

在react中是这样用的

var img1 = require('./img01.png');
var img2 = require('./img02.png');

render(){
    <img src={item.type?img1:img2} />
}

Answer 3

:src="status==1?require('../img/xxx.png'):require('../img/xxx.png')"

举个例子 要用require

Answer 4

这个我之前好像遇到过，动态改变img的src必须是绝对地址(ps:以/开头)，常量可以是相对地址

Answer 5

额，你这是面向思否编程啊，一题又一题，你2个路径都不一样，你看看你图片放哪啊，把对的路径放到哪个list数组里面

Answer 6

你好，楼主：

如果 src 直接引用图片的话，可以写成 '../../assets/喜欢.png'，例如：

<img src="../../assets/喜欢.png">

但是绑定变量的话，如下这样就不对了

<img :src="item.srci? '../../assets/喜欢.png':'../../assets/喜欢2.png'">

解决办法：

首先 import 一下

import imgUrl1 from '../../assets/喜欢.png'
import imgUrl2 from '../../assets/喜欢2.png'

然后在 data 中定义

data () {
    return {
        imgUrl1: imgUrl1,
        imgUrl2: imgUrl2
    }
}

最后修改一下 template

<img :src="item.srci ? imgUrl1 : imgUrl2">

原因就是楼上所说的，图片被处理过了，如果楼主非要直接写路径，可以尝试把图片放在 static 文件夹中，（static 文件夹中的资源不会被 webpack 处理），哦对了，如果楼主使用 vue-cli3.0 的话，没有 static 文件夹了，可以放在 public 中。