Research questions address (address of the project, not the server data), cited the failure to use vue, when the reference dynamic modification img

Problem Description

code show as below

<img class="info-picture-main" :src="first.picUrl" alt="ddd" srcset />

      info: {
        picture: [
          {
            title: "测试啊啊啊啊",
            href: "javascript:void(0)",
            picUrl:
              "../assets/info/1.jpg"
          }
        ]
      }

This reference method fails, the picture will not be displayed

If the method is not dynamic, write directly in the address bar inside src, is possible

<img class="info-picture-main" :src="../assets/info/1.jpg" alt="ddd" srcset />

solution

Use require

<img class="info-picture-main" :src="first.picUrl" alt="ddd" srcset />

      info: {
        picture: [
          {
            title: "测试啊啊啊啊",
            href: "javascript:void(0)",
            picUrl: require("../assets/info/1.jpg")
          }
        ]
      }

Use import

<img class="info-picture-main" :src="first.picUrl" alt="ddd" srcset />

import pic1 from "../assets/info/1.jpg";
export default {
  data() {
    return {
      info: {
        picture: [
          {
            title: "学校召开引进人才暨青年教师代表座谈会dddddddddddddddddd",
            href: "javascript:void(0)",
            picUrl:pic1 
          }
        ]
      }
    };
  }
};