Html img 标签不适用于 src 中的相对路径
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31397137/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
img tag not working with relative path in src
提问by PHP Developer
This is not working:
这不起作用：
<img src="../assets/images/image.jpg" alt="Alternative Text">
But this is working:
但这是有效的：
<img src="http://localhost/abc/def/geh/assets/images/image.jpg" alt="Alternative Text">
In my scenario, I just cannot work with absolute path. I have to use relative path.
在我的场景中，我无法使用绝对路径。我必须使用相对路径。
回答by Tharushi Geethma
回答by user2782001
"../assets/images/image.jpg" -This means
"../assets/images/image.jpg" - 这意味着
- '../' go up one directory from where I am now
- find the 'assets/' folder
- find the 'images' folder
- find the 'image.jpg' file.
- '../' 从我现在所在的位置上移一个目录
- 找到“资产/”文件夹
- 找到“图像”文件夹
- 找到“image.jpg”文件。
That relative link will only work if your page is in a subfolder in
该相对链接仅在您的页面位于
"http://localhost/abc/def/geh/"
" http://localhost/abc/def/geh/"
If the location of your page really is
如果您的页面位置确实是
"localhost/asdf/asdf/asdf/asdf/index.php"
“本地主机/asdf/asdf/asdf/asdf/index.php”
(which seems ridiculous) to get to the assets folder relatively you would have to go all the way to the root.
（这似乎很荒谬）要相对地进入资产文件夹，您必须一直走到根目录。
'../../../../abc/deh/geh/assets/images/image.jpg;
'../../../../abc/deh/geh/assets/images/image.jpg;
Alternatively you could use a base tag in your head tag to make the URL in the actual src attribute more friendly.
或者，您可以在 head 标记中使用基本标记，以使实际 src 属性中的 URL 更加友好。
回答by Miro
I suspect you didn't actually do what I told you to so here is a screenshot:
我怀疑你实际上并没有按照我告诉你的去做，所以这里是一个截图：
If the image opens in a new tab then you have some kind of bug or extension that's messing it up in the html. If you messed up the relative path, you'll most likely get 404 but you'll be able to see the path as absolute.
It may look like http://localhost/asdf/asdf/asdf/asdf/assets/assets/image.jpgEither way, send a screenshot of the above operation.
如果图像在新选项卡中打开，那么您就会在 html 中遇到某种错误或扩展。如果您弄乱了相对路径，您很可能会得到 404，但您将能够将路径视为绝对路径。它可能看起来像http://localhost/asdf/asdf/asdf/asdf/assets/assets/image.jpg无论哪种方式，发送上述操作的屏幕截图。
回答by Vinod Kumar
I will make your life very very simple.
Use it in following manner
我会让你的生活非常非常简单。
按以下方式使用它
<img src="../image_store/Part2.jpg" alt="Dress Picture"/>回答by Eduard
In React:
在反应中：
import the image:
import image from '../../assets/random-image.png'use the imported variable as a value of a
srcattribute:<img src={image} />
导入图像：
import image from '../../assets/random-image.png'使用导入的变量作为
src属性的值：<img src={image} />
